/* FILE: assets/css/styles.css */ /* ========================= Design tokens ========================= */ :root{ --bg:#fbfaf7; --text:#1f2428; --muted:#5c6670; --line:#e7e2d9; --card:#ffffff; --accent:#2f5d50; --max: 1120px; /* hero + media width */ --content-max: 880px; /* comfortable text measure */ --gutter: clamp(20px, 5vw, 60px); --radius: 18px; --shadow: 0 8px 30px rgba(0,0,0,.08); --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --serif: ui-serif, Georgia, "Times New Roman", Times, serif; } /* ========================= Base ========================= */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit} a:hover{color:var(--accent)} img{max-width:100%; display:block} .skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:var(--gutter); top:16px; width:auto; height:auto; background:var(--card); padding:10px 12px; border:1px solid var(--line); border-radius:12px; } /* ========================= Header / Nav ========================= */ .header{ position: relative; z-index: 120; padding: 18px var(--gutter); border-bottom:1px solid var(--line); background:rgba(251,250,247,.9); backdrop-filter:saturate(140%) blur(6px); } .header-inner{ max-width: calc(var(--max) + (var(--gutter) * 2)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; } .brand{ display:flex; flex-direction:column; gap:2px; text-decoration:none; } .brand .title{ font-family:var(--serif); font-size:18px; letter-spacing:.2px; } .brand .subtitle{ font-size:12.5px; color:var(--muted); } .nav{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; justify-content:flex-end; } .nav a{ text-decoration:none; font-size:14px; color:var(--muted); padding:6px 8px; border-radius:10px; } .nav a[aria-current="page"]{ color:var(--text); background:rgba(47,93,80,.08); } .lang{ display:flex; gap:10px; align-items:center; margin-left:8px; padding-left:12px; border-left:1px solid var(--line); font-size:13px; color:var(--muted); } .lang a{ text-decoration:none; padding:6px 8px; border-radius:10px; border:1px solid transparent; } .lang a.is-active{ color:var(--text); border-color:var(--line); background:var(--card); } /* Mobile-friendly menu */ .nav-toggle{ display:none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 14px; color: var(--text); cursor: pointer; } @media (max-width: 720px){ .header-inner{align-items:center} .nav-toggle{display:inline-flex} .nav{ position: absolute; right: var(--gutter); top: 64px; width: min(92vw, 360px); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 10px; display: none; flex-direction: column; gap: 6px; align-items: stretch; z-index: 50; } .nav.is-open{display:flex} .nav a{ padding: 10px 12px; font-size: 15px; } .lang{ border-left:none; padding-left:0; margin-left:0; justify-content:flex-start; } } /* ========================= Main layout ========================= */ .main{ padding: 0 var(--gutter) 54px; } /* This is your main page container. Keep it hero-width so media aligns with hero. Text measure is controlled inside with .prose / p max-width rules. */ .content{ max-width: var(--max); margin: 28px auto 0; } .content h1{ font-family:var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height:1.15; margin: 0 0 14px; letter-spacing:.2px; } .content h2{ font-family:var(--serif); font-size: 22px; margin: 28px 0 10px; } .content p{ margin: 0 0 14px; font-size: 17px; } .content ul{ margin: 10px 0 18px 20px; } .content li{ margin: 6px 0; } .content .muted{ color:var(--muted); } .content .callout{ border-left: 3px solid rgba(47,93,80,.35); padding: 10px 14px; background: rgba(255,255,255,.55); border-radius: 12px; } /* Comfortable text measure inside hero-width pages */ .prose p, .prose ul, .prose ol, .acro-copy p{ max-width: 60ch; } /* ========================= Hero ========================= */ .hero{ position: relative; z-index: 1; max-width: var(--max); margin: 24px auto 0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: transparent; aspect-ratio: 21 / 9; min-height: 260px; } .hero img{ width:100%; height:100%; object-fit:cover; } .hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0) 40%, rgba(0,0,0,.18)); pointer-events:none; } @media (max-width: 720px){ .hero{aspect-ratio: 16 / 10} .content p{font-size:16px} } /* Mobile hero behavior */ @media (max-width: 900px){ .hero{ aspect-ratio: auto; min-height: 0; height: 240px; overflow: hidden; } .hero::after{display:none} .hero img{height: 100%} } /* SilvEster hero crop (desktop) */ @media (min-width: 721px){ .hero--silvester img{object-position: center 78%;} } /* Double hero for workshops */ .hero--double{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; aspect-ratio: auto; min-height: 0; } .hero--double img{ width:100%; height:100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); } @media (max-width: 900px){ .hero--double{ grid-template-columns: 1fr; } .hero--double img{max-height: 340px;} } /* ========================= Footer ========================= */ .footer{ margin-top: 56px; padding: 24px var(--gutter); border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; } .footer-inner{ max-width: calc(var(--max) + (var(--gutter) * 2)); margin:0 auto; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; } .footer a{color:var(--muted); text-decoration:none} .footer a:hover{color:var(--text)} /* ========================= AcroFestonia titlebar ========================= */ .acro-titlebar{ max-width: calc(var(--max) + (var(--gutter) * 2)); margin: 18px auto 0; padding: 0 var(--gutter); } .acro-titlebar-inner{ display:flex; align-items:center; justify-content:center; gap: 18px; } .acro-titleblock{ text-align:center; } .acro-title{ font-family: var(--serif); font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; margin: 0; } .acro-subtitle{ color:#000; font-size:1em; } .acro-logo{ width: 84px; height: auto; border-radius: 12px; } .acro-logo--left{ transform: scaleX(-1); } @media (max-width: 720px){ .acro-titlebar-inner{ flex-direction: row; flex-wrap: nowrap; } .acro-logo{ width: 56px; border-radius: 10px; } } /* ========================= Forms ========================= */ .form-card{ margin: 22px 0 0; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.65); } .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-grid .full{grid-column: 1 / -1;} label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } input[type="text"], input[type="email"]{ width:100%; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 16px; } .checkbox-row{ display:flex; gap: 10px; align-items:flex-start; font-size: 14px; color: var(--muted); } .checkbox-row input{margin-top: 3px;} .btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(47,93,80,.35); background: rgba(47,93,80,.10); color: var(--text); cursor:pointer; font-size: 15px; } .btn:hover{background: rgba(47,93,80,.14);} .form-status{ margin-top: 10px; font-size: 14px; } .form-status.is-ok{color: #2f5d50;} .form-status.is-error{color: #7a2b2b;} @media (max-width: 720px){ .form-grid{grid-template-columns: 1fr;} } /* Compact form tweaks */ .form-title{font-size: 18px;} @media (max-width: 720px){.form-title{font-size: 17px;}} .form-card--compact{ padding:12px 12px 10px; border-radius:14px; max-width: 640px; } .form-card--compact label{font-size:12px; margin-bottom:5px;} .form-card--compact input[type="text"], .form-card--compact input[type="email"]{ padding:9px 10px; font-size:14px; border-radius:10px; } .form-card--compact .btn{ padding:9px 12px; font-size:14px; border-radius:10px; } /* ========================= Acrofestonia layout (copy + signup) ========================= */ .acro-info{ display:grid; gap:2.5rem; align-items:start; } @media (min-width: 900px){ .acro-info{ grid-template-columns: 1fr 440px; } } .acro-copy p{max-width: 60ch;} .acro-signup .form-card{margin:0;} .acro-social{ margin-top: 2.5rem; } .acro-social .social-links{ display:flex; gap: 18px; justify-content:flex-start; flex-wrap:wrap; } /* ========================= Social buttons ========================= */ .social{ margin-top: 26px; display:flex; gap: 10px; flex-wrap:wrap; } .social a{ display:inline-flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-decoration:none; color: var(--muted); } .social a:hover{color: var(--text);} .social svg{width: 18px; height: 18px;} /* WhatsApp link */ .whatsapp-link{display:inline-block; text-decoration:underline;} /* ========================= Generic gallery strip (horizontal scroll) ========================= */ .gallery{ margin: 28px 0 0; } .gallery-head{ display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .gallery-controls{ display:flex; gap: 8px; } .icon-btn{ width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor:pointer; } .gallery-track{ display:flex; gap: 12px; overflow:auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .gallery-item{ flex: 0 0 auto; width: 320px; height: 210px; border-radius: 16px; overflow:hidden; box-shadow: var(--shadow); scroll-snap-align: start; background: #ddd; } .gallery-item img{ width:100%; height:100%; object-fit: cover; } /* ========================= Acro galleries (PHOTOS + VIDEO thumbnails) Goal: align with hero, responsive sizing, uniform tiles. ========================= */ /* Default: contained like hero (fixes your “full-bleed override” problem) */ .acro-gallery{ width: 100%; max-width: var(--max); margin: 2.5rem auto 0; } .acro-gallery h2{ margin: 0 0 1rem; } /* Grid */ .acro-gallery .gallery-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items:start; } /* Uniform tiles (photos + video thumbs) */ .acro-gallery .gallery-fig{ margin:0; border-radius: 14px; overflow:hidden; background:#fff; } /* Make the tile a fixed aspect box. Captions are outside (video) */ .acro-gallery .gallery-fig > img{ width:100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display:block; } /* Video thumbs: same 4:3 tile */ .acro-gallery .video-thumb{ display:block; position:relative; aspect-ratio: 4 / 3; overflow:hidden; text-decoration:none; } .acro-gallery .video-thumb img{ width:100%; height:100%; object-fit: cover; display:block; } /* Responsive columns */ @media (max-width: 900px){ .acro-gallery .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } } @media (max-width: 520px){ .acro-gallery .gallery-grid{ grid-template-columns: 1fr; gap: 18px; } } /* Optional: if you ever WANT full-bleed again, add class="acro-gallery is-fullbleed" in HTML */ .acro-gallery.is-fullbleed{ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .acro-gallery.is-fullbleed .gallery-grid{ padding: 0 var(--gutter); } /* ========================= Video cosmetics (play icon + captions) ========================= */ .acro-videos h2{ text-align:left; } /* play icon overlay */ .acro-videos .video-thumb::after{ content:""; position:absolute; left: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 999px; background: rgba(0,0,0,0.55); pointer-events:none; } .acro-videos .video-thumb::before{ content:""; position:absolute; left: 30px; bottom: 26px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid rgba(255,255,255,0.95); pointer-events:none; } .video-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-top:.45rem; } .video-year{ font-weight:700; } .video-link{ font-size:.95rem; white-space:nowrap; } /* ========================= Rooms grid ========================= */ .rooms-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 26px; } .room-card{margin:0;} .room-card img{ width:100%; height: 240px; object-fit: cover; border-radius: 0; } .room-card figcaption{ margin-top: 8px; font-size: 15px; } @media (max-width: 900px){ .rooms-grid{grid-template-columns: 1fr; gap: 16px;} .room-card img{height: 220px;} } /* ========================= Contact card ========================= */ .contact-card{ display:flex; gap: 16px; align-items:center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.65); margin: 18px 0 26px; } .contact-photo{ width: 92px; height: 92px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; } .contact-name{ font-family: var(--serif); font-size: 20px; margin-bottom: 6px; } @media (max-width: 720px){ .contact-card{flex-direction:column; align-items:flex-start;} .contact-photo{width: 120px; height: 120px;} } /* ========================= Map embed ========================= */ .map-embed{ margin-top: 26px; } .map-embed iframe{ width: 100%; max-width: 100%; height: 420px; border: 0; border-radius: 0; } @media (max-width: 720px){ .map-embed iframe{height: 340px;} } /* ========================= Kuusiku Rental: horizontal thumbnails ========================= */ .rental-gallery{ margin: 0.75rem 0 1.5rem; position: relative; } .rental-gallery-strip{ display:flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 10px 2px; } .rental-gallery-strip.is-dragging{ cursor: grabbing; } .rental-gallery-strip a, .rental-gallery-strip button, .rental-gallery-strip img{ user-select: none; -webkit-user-drag: none; } .rental-gallery-item{ flex: 0 0 auto; scroll-snap-align: start; } .rental-gallery-btn{ border:0; padding:0; background:transparent; cursor:pointer; display:block; line-height:0; } .rental-gallery-thumb{ width:240px; height:160px; object-fit:cover; border-radius:14px; display:block; max-width:none; } @media (max-width: 900px){ .rental-gallery-thumb{width:220px; height:150px;} } @media (max-width: 520px){ .rental-gallery-thumb{width:72vw; height:190px;} } /* Arrows for scroll galleries */ .gallery-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.9); cursor: pointer; font-size: 24px; line-height: 40px; text-align: center; z-index: 5; } .gallery-arrow-left{ left: -8px; } .gallery-arrow-right{ right: -8px; } .gallery-arrow:hover{ background: #fff; } /* ========================= Lightbox (generic) ========================= */ .lightbox{ display:none; position:fixed; inset:0; background: rgba(0,0,0,0.9); justify-content:center; align-items:center; z-index:9999; padding: 18px; } .lightbox.is-open{display:flex;} .lightbox img{ max-width: 90%; max-height: 90%; } /* ========================= Gallery scroll (legacy helper) ========================= */ .gallery-scroll{ display:flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 20px 0; -webkit-overflow-scrolling: touch; } .gallery-scroll img{ height: 200px; width: auto; max-width: none; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease; } .gallery-scroll img:hover{ transform: scale(1.05); } .title-icon { height: 0.95em; width: auto; margin-left: 0.35em; vertical-align: -0.1em; } .title { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: middle; } .title-icon { height: 3.2em; width: auto; margin-right: 0.4em; flex: 0 0 auto; }