/* ============================================================================ ROIHU — avotuliravintola Yhteinen tyylitiedosto (style.css) kaikille sivuille ---------------------------------------------------------------------------- SISÄLLYS 1. Fontit & muuttujat (design tokens) 2. Reset & perusasetukset 3. Typografia 4. Layout-apuluokat (container, section-välit) 5. Navigaatio 6. Napit & linkit 7. Hero (kaikki sivut) 8. Etusivu: kohokohdat, arvostelut, CTA-palkki 9. Ruokalista (menu.html) 10. Tarina & Tunnelma (tarina.html) 11. Varaa pöytä (varaa.html) 12. Footer 13. Liikkeet & animaatiot (embers, reveal, glow) 14. Saavutettavuus (focus, reduced motion) 15. Responsiivisuus / media-kyselyt ============================================================================ */ /* ============================================================================ 1. FONTIT & MUUTTUJAT ============================================================================ */ :root { /* --- Värit: lämmin hiillos-paletti, ei mustaa vaan syvä espresso --- */ --color-bg: #1B1310; /* pääpohja, lämmin espresso-musta */ --color-bg-alt: #221813; /* vaihtoehtoinen paneelipohja */ --color-bg-raised: #2C1F18; /* korotettu pinta (kortit) */ --color-line: rgba(239, 230, 216, 0.14); /* hiuslinjat tummalla */ --color-line-strong: rgba(239, 230, 216, 0.28); --color-ember-1: #E1512A; /* hiilloksen puna-oranssi */ --color-ember-2: #F2A93C; /* liekin kulta */ --gradient-ember: linear-gradient(135deg, var(--color-ember-1), var(--color-ember-2)); --color-parchment: #F1E8DA; /* päätekstiväri tummalla pohjalla */ --color-parchment-dim: #C9BAA2; /* vaimennettu teksti */ --color-oxblood: #7A3327; /* syvä toissijainen aksentti */ --color-verdigris: #6E8163; /* patinoitu kupari-vihreä, vain onnistumistiloihin */ --color-error: #C4573F; /* --- Typografia --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* --- Tilarytmi --- */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1.25rem; --space-4: 2rem; --space-5: 3.25rem; --space-6: 5.25rem; --space-7: 8.5rem; --container-width: 1180px; --measure: 62ch; /* leipätekstin lukumitta */ --radius-sm: 2px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } @font-face { /* Fontit ladataan HTML:n -osiossa Google Fontsista. Tämä tiedosto ei itsessään lataa fontteja. */ } /* ============================================================================ 2. RESET & PERUSASETUKSET ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-parchment); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } ul, ol { padding: 0; margin: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; } /* Taustatekstuuri: hyvin hienovarainen "hiillos"-noise, ei kuvatiedostoa vaativa */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05; background-image: radial-gradient(rgba(242, 169, 60, 0.6) 0.5px, transparent 0.5px); background-size: 3px 3px; } /* ============================================================================ 3. TYPOGRAFIA ============================================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; color: var(--color-parchment); } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ember-2); display: inline-flex; align-items: center; gap: var(--space-1); } .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gradient-ember); display: inline-block; } .display-xl { font-size: clamp(2.75rem, 3rem + 3.5vw, 6.5rem); font-style: italic; font-weight: 500; } .display-lg { font-size: clamp(2.25rem, 1.8rem + 2.4vw, 4rem); } .display-md { font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem); } p { margin: 0 0 1em; color: var(--color-parchment-dim); } .lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--color-parchment-dim); max-width: 48ch; } .body-measure { max-width: var(--measure); } /* ============================================================================ 4. LAYOUT-APULUOKAT ============================================================================ */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-4); } section { position: relative; padding-block: var(--space-6); z-index: 1; } .section-tight { padding-block: var(--space-5); } .divider { border: none; border-top: 1px solid var(--color-line); margin: 0; } .section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); max-width: 640px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } /* ============================================================================ 5. NAVIGAATIO ============================================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: var(--space-3); background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), padding-block 0.4s var(--ease); } .site-nav.is-scrolled { background: rgba(27, 19, 16, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); padding-block: var(--space-2); } .site-nav .container { display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; letter-spacing: 0.02em; } .nav-logo span { background: var(--gradient-ember); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-links { display: flex; align-items: center; gap: var(--space-4); } .nav-links a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-parchment-dim); position: relative; padding-block: 4px; transition: color 0.25s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gradient-ember); transition: width 0.3s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-parchment); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-cta { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-line-strong); padding: 0.55em 1.1em; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .nav-cta:hover { border-color: var(--color-ember-2); background: rgba(242, 169, 60, 0.08); } .nav-toggle { display: none; background: none; border: none; color: var(--color-parchment); width: 32px; height: 22px; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); } .nav-toggle span { top: 50%; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } /* ============================================================================ 6. NAPIT & LINKIT ============================================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.95em 1.7em; border: 1px solid transparent; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); } .btn-primary { background: var(--gradient-ember); color: #1B1310; font-weight: 600; } .btn-primary:hover { box-shadow: 0 0 0 1px rgba(242, 169, 60, 0.4), 0 12px 32px -8px rgba(225, 81, 42, 0.55); transform: translateY(-1px); } .btn-ghost { border-color: var(--color-line-strong); color: var(--color-parchment); } .btn-ghost:hover { border-color: var(--color-ember-2); color: var(--color-ember-2); } .text-link { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--color-line-strong); padding-bottom: 2px; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .text-link:hover { color: var(--color-ember-2); border-color: var(--color-ember-2); } /* ============================================================================ 7. HERO (kaikki sivut) ============================================================================ */ .hero { min-height: 100svh; display: flex; align-items: flex-end; position: relative; padding-top: var(--space-7); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Paikanvaraaja kuvalle ennen kuin oikea kuva on lisätty: hehkuva hiillos-gradientti, joka toimii itsessään tunnelmallisena taustana */ .hero-media .media-placeholder { width: 100%; height: 100%; background: radial-gradient(ellipse 60% 50% at 30% 75%, rgba(225, 81, 42, 0.35), transparent 60%), radial-gradient(ellipse 45% 40% at 75% 60%, rgba(242, 169, 60, 0.18), transparent 65%), var(--color-bg); } .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(27,19,16,0.35) 0%, rgba(27,19,16,0.55) 55%, rgba(27,19,16,0.96) 100%); } .hero-inner { padding-bottom: var(--space-6); max-width: 760px; } .hero-inner .eyebrow { margin-bottom: var(--space-3); } .hero-inner h1 { margin-block: var(--space-2); } .hero-inner .lede { margin-top: var(--space-2); margin-bottom: var(--space-4); } .hero-actions { display: flex; gap: var(--space-3); align-items: center; } /* Pieni sivu-hero (menu / tarina / varaa) — matalampi kuin etusivun */ .hero-compact { min-height: 56vh; } .hero-compact .hero-inner { padding-bottom: var(--space-5); } /* Hiiloshiukkaset heron päällä, ks. myös script.js */ .ember-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ember-particle { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--color-ember-2); box-shadow: 0 0 6px 2px rgba(242, 169, 60, 0.7); opacity: 0; animation: rise linear infinite; } /* ============================================================================ 8. ETUSIVU: kohokohdat, arvostelut, CTA-palkki ============================================================================ */ .intro-strip { padding-block: var(--space-5); } .intro-strip .grid-2 { align-items: start; gap: var(--space-5); } /* Kohokohta-annokset: epäsymmetrinen, lomittuva asettelu — ei geneeristä 3-kortin riviä */ .highlights { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); } .highlight-card { position: relative; background: var(--color-bg-alt); border: 1px solid var(--color-line); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); } .highlight-card:nth-child(1) { grid-column: span 3; } .highlight-card:nth-child(2) { grid-column: span 3; margin-top: var(--space-4); } .highlight-card:nth-child(3) { grid-column: span 6; margin-top: calc(var(--space-3) * -1); } .highlight-card:hover { transform: translateY(-4px); border-color: var(--color-line-strong); } .highlight-media { aspect-ratio: 4 / 3; overflow: hidden; } .highlight-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .highlight-card:hover .highlight-media img { transform: scale(1.05); } .highlight-media .media-placeholder { width: 100%; height: 100%; background: radial-gradient(circle at 40% 40%, rgba(225,81,42,0.3), var(--color-bg-raised) 70%); } .highlight-body { padding: var(--space-3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); } .highlight-body h3 { font-size: 1.2rem; font-weight: 500; } .highlight-body .price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-ember-2); white-space: nowrap; } /* Asiakasarviot: karuselli */ .testimonials { background: var(--color-bg-alt); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .testimonial-track { position: relative; min-height: 200px; } .testimonial-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; } .testimonial-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .testimonial-slide blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); max-width: 720px; margin: 0 0 var(--space-3); color: var(--color-parchment); } .testimonial-slide cite { font-family: var(--font-mono); font-style: normal; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--color-parchment-dim); text-transform: uppercase; } .testimonial-dots { display: flex; gap: var(--space-1); margin-top: var(--space-4); } .testimonial-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-line-strong); background: transparent; padding: 0; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .testimonial-dots button.is-active { background: var(--gradient-ember); border-color: transparent; } /* CTA-palkki */ .cta-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .cta-strip h2 { max-width: 14ch; } /* ============================================================================ 9. RUOKALISTA (menu.html) ============================================================================ */ .menu-nav { position: sticky; top: 60px; z-index: 50; display: flex; gap: var(--space-4); padding-block: var(--space-2); background: rgba(27, 19, 16, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); overflow-x: auto; } .menu-nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--color-parchment-dim); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .menu-nav a.is-active { color: var(--color-ember-2); border-color: var(--color-ember-2); } .menu-category { padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); } .menu-category:last-of-type { border-bottom: none; } .menu-category-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); } .menu-category-head p { margin: 0; max-width: 40ch; } .menu-list { display: flex; flex-direction: column; gap: var(--space-3); } .menu-item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--space-2); } .menu-item-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; display: flex; align-items: center; gap: var(--space-1); } /* "Kokin suosikki" -merkintä: pieni liekki-symboli, ei geneerinen badge */ .pick-flag { width: 7px; height: 7px; border-radius: 50% 50% 50% 0; background: var(--gradient-ember); transform: rotate(45deg); flex-shrink: 0; } /* Pisteviiva nimen ja hinnan välissä — klassinen ruokalistan elementti */ .menu-item-leader { border-bottom: 1px dotted var(--color-line-strong); transform: translateY(-4px); min-width: 24px; } .menu-item-price { font-family: var(--font-mono); font-size: 0.95rem; color: var(--color-ember-2); } .menu-item-desc { grid-column: 1 / -1; font-size: 0.92rem; color: var(--color-parchment-dim); max-width: 60ch; margin: 0; } .menu-texture-break { height: 140px; margin-block: var(--space-5); background: radial-gradient(ellipse at center, rgba(225,81,42,0.18), transparent 70%), var(--color-bg-alt); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; } .menu-texture-break span { font-family: var(--font-display); font-style: italic; color: var(--color-parchment-dim); opacity: 0.6; } /* ============================================================================ 10. TARINA & TUNNELMA (tarina.html) ============================================================================ */ .story-block { display: flex; justify-content: center; padding-block: var(--space-5); } .story-block .body-measure p { font-size: 1.08rem; } .story-block .body-measure p:first-of-type::first-letter { font-family: var(--font-display); font-style: italic; font-size: 3.4em; float: left; line-height: 0.8; padding-right: 0.1em; padding-top: 0.05em; color: var(--color-ember-2); } /* Täysleveä kuvakatko tarinan lomassa, kevyt parallax script.js:ssä */ .story-media-break { position: relative; height: 66vh; overflow: hidden; margin-block: var(--space-2); } .story-media-break img, .story-media-break .media-placeholder { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; } .story-media-break .media-placeholder { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(225,81,42,0.3), transparent 65%), var(--color-bg-raised); } .story-media-break figcaption { position: absolute; bottom: var(--space-3); left: var(--space-4); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-parchment-dim); background: rgba(27,19,16,0.55); padding: 0.4em 0.8em; } /* Aikajana — oikea kronologia, siksi numerointi/vuosiluvut ovat perusteltuja */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-item { display: grid; grid-template-columns: 100px 1px 1fr; gap: var(--space-4); padding-block: var(--space-3); } .timeline-year { font-family: var(--font-mono); color: var(--color-ember-2); font-size: 0.95rem; padding-top: 2px; } .timeline-rule { position: relative; background: var(--color-line-strong); } .timeline-rule::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--gradient-ember); } .timeline-item h4 { font-size: 1.15rem; margin-bottom: 0.3em; font-weight: 500; } .timeline-item p { margin: 0; font-size: 0.95rem; } /* Galleria + lightbox */ .gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); } .gallery-item { cursor: pointer; overflow: hidden; position: relative; border: 1px solid var(--color-line); } .gallery-item:nth-child(6n+1) { grid-column: span 3; grid-row: span 2; } .gallery-item:nth-child(6n+2) { grid-column: span 3; } .gallery-item:nth-child(6n+3) { grid-column: span 3; } .gallery-item:nth-child(6n+4) { grid-column: span 2; } .gallery-item:nth-child(6n+5) { grid-column: span 2; } .gallery-item:nth-child(6n+6) { grid-column: span 2; } .gallery-item img, .gallery-item .media-placeholder { width: 100%; height: 100%; min-height: 160px; object-fit: cover; transition: transform 0.5s var(--ease), filter 0.5s var(--ease); } .gallery-item .media-placeholder { background: radial-gradient(circle at 30% 30%, rgba(242,169,60,0.22), var(--color-bg-raised) 70%); } .gallery-item:hover img, .gallery-item:hover .media-placeholder { transform: scale(1.06); filter: brightness(1.1); } .gallery-item::after { content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; color: var(--color-parchment); background: rgba(27,19,16,0); opacity: 0; transition: opacity 0.3s var(--ease), background 0.3s var(--ease); } .gallery-item:hover::after { opacity: 1; background: rgba(27,19,16,0.35); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15, 10, 8, 0.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease); padding: var(--space-4); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-frame { max-width: 900px; width: 100%; } .lightbox-frame .media-placeholder, .lightbox-frame img { width: 100%; max-height: 74vh; object-fit: cover; background: radial-gradient(ellipse at center, rgba(225,81,42,0.25), var(--color-bg-raised) 70%); } .lightbox-caption { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-parchment-dim); letter-spacing: 0.04em; } .lightbox-close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: 1px solid var(--color-line-strong); color: var(--color-parchment); width: 40px; height: 40px; font-size: 1.1rem; } .lightbox-close:hover { border-color: var(--color-ember-2); color: var(--color-ember-2); } /* ============================================================================ 11. VARAA PÖYTÄ (varaa.html) ============================================================================ */ .reservation-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: start; } .info-panel { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--space-5); } .info-block h4 { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ember-2); font-weight: 500; margin-bottom: var(--space-2); } .info-block p { margin: 0; } .info-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.3em var(--space-3); font-family: var(--font-mono); font-size: 0.88rem; } .info-hours dt { color: var(--color-parchment-dim); } .info-hours dd { margin: 0; text-align: right; } .map-frame { aspect-ratio: 16/10; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(225,81,42,0.18), var(--color-bg-raised) 75%); border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-parchment-dim); text-align: center; padding: var(--space-3); } /* Lomake */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .form-field { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: var(--space-3); } .form-field.full { grid-column: 1 / -1; } .form-field label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-parchment-dim); } .form-field input, .form-field select, .form-field textarea { background: var(--color-bg-alt); border: 1px solid var(--color-line-strong); color: var(--color-parchment); padding: 0.85em 1em; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .form-field textarea { resize: vertical; min-height: 100px; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-ember-2); background: var(--color-bg-raised); } .form-field.has-error input, .form-field.has-error select { border-color: var(--color-error); } .field-error { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-error); min-height: 1em; } .form-submit-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .form-note { font-size: 0.82rem; color: var(--color-parchment-dim); margin: 0; } /* Vahvistustila (demo — ei oikeaa lähetystä, ks. script.js) */ .reservation-confirm { display: none; border: 1px solid var(--color-verdigris); background: rgba(110, 129, 99, 0.08); padding: var(--space-4); align-items: flex-start; gap: var(--space-3); } .reservation-confirm.is-visible { display: flex; } .reservation-confirm .mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--color-verdigris); color: var(--color-verdigris); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } .reservation-confirm h4 { font-family: var(--font-body); font-weight: 600; color: var(--color-parchment); margin-bottom: 0.3em; } .reservation-confirm p { margin: 0; font-size: 0.92rem; } form.is-submitted .form-fields { display: none; } /* ============================================================================ 12. FOOTER ============================================================================ */ .site-footer { border-top: 1px solid var(--color-line); padding-block: var(--space-5); background: var(--color-bg-alt); } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); } .footer-brand .nav-logo { display: inline-block; margin-bottom: var(--space-2); } .footer-brand p { max-width: 34ch; font-size: 0.92rem; } .footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-parchment-dim); margin-bottom: var(--space-2); font-weight: 500; } .footer-col ul { display: flex; flex-direction: column; gap: 0.6em; } .footer-col a:hover { color: var(--color-ember-2); } .footer-bottom { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-parchment-dim); flex-wrap: wrap; gap: var(--space-1); } /* ============================================================================ 13. LIIKKEET & ANIMAATIOT ============================================================================ */ /* Sisääntulo scrollatessa (Intersection Observer togglaa .is-visible) */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } @keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.5; } 100% { transform: translateY(-100vh) translateX(var(--drift, 20px)); opacity: 0; } } /* ============================================================================ 14. SAAVUTETTAVUUS ============================================================================ */ :focus-visible { outline: 2px solid var(--color-ember-2); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================================ 15. RESPONSIIVISUUS ============================================================================ */ @media (max-width: 980px) { .grid-2, .footer-grid { grid-template-columns: 1fr; } .reservation-layout { grid-template-columns: 1fr; } .info-panel { position: static; } .highlights { grid-template-columns: 1fr 1fr; } .highlight-card:nth-child(1), .highlight-card:nth-child(2), .highlight-card:nth-child(3) { grid-column: span 1; margin-top: 0; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-item, .gallery-item:nth-child(6n+1) { grid-column: span 1 !important; grid-row: auto !important; } } @media (max-width: 720px) { :root { --space-6: 3.5rem; --space-7: 5rem; } /* Piilossa oletuksena; .is-open avaa koko ruudun valikkona (ks. script.js kohta 1) */ .nav-links { display: none; position: fixed; inset: 0; background: rgba(27, 19, 16, 0.98); flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); } .nav-links.is-open { display: flex; } .nav-links a { font-size: 1.05rem; } .nav-toggle { display: block; position: relative; z-index: 10; /* pysyy klikattavana avatun valikon päällä */ } /* Hampurilaisikoni animoituu ristiksi kun valikko on auki */ .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); } .container { padding-inline: var(--space-3); } .form-grid { grid-template-columns: 1fr; } .menu-item { grid-template-columns: 1fr auto; } .menu-item-leader { display: none; } .menu-item-name { grid-column: 1 / -1; } .timeline-item { grid-template-columns: 70px 1px 1fr; gap: var(--space-3); } .cta-strip { flex-direction: column; align-items: flex-start; } }