/* ───────────────────────────────────────────── Farina Theme — main.css Mobile-first. All tokens via CSS custom props set by functions.php colour output in . ───────────────────────────────────────────── */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, video { display: block; max-width: 100%; } button { cursor: pointer; font-family: inherit; } a { color: inherit; } /* ── ROOT TOKENS ── */ :root { --farina-bg: #0c0b09; --farina-card: #131210; --farina-border: #252320; --farina-accent: #b85c38; --farina-accent-lt: #e8c4b0; --farina-text: #f0ece4; --farina-muted: rgba(240,236,228,0.48); --farina-radius: 20px; --farina-serif: 'Cormorant Garamond', Georgia, serif; --farina-sans: 'Jost', system-ui, sans-serif; } /* ── BASE ── */ html, body { background-color: var(--farina-bg) !important; color: var(--farina-text); font-family: var(--farina-sans); font-weight: 300; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ───────────────────────────────────────────── NAV ───────────────────────────────────────────── */ .farina-nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 480px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(12,11,9,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--farina-border); border-radius: 100px; z-index: 200; } .farina-nav__hamburger { background: none; border: none; display: flex; flex-direction: column; gap: 5px; padding: 4px; } .farina-nav__hamburger span { display: block; width: 20px; height: 1.5px; background: var(--farina-text); transition: opacity 0.2s; } .farina-nav__logo { font-family: var(--farina-serif); font-size: 21px; font-weight: 400; font-style: italic; letter-spacing: 0.1em; color: var(--farina-text); text-decoration: none; } .farina-nav__logo-img { height: 32px; width: auto; object-fit: contain; } .farina-nav__cta { background: rgba(184,92,56,0.18); border: 1px solid rgba(184,92,56,0.35); border-radius: 100px; color: var(--farina-text); font-family: var(--farina-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 16px; text-decoration: none; white-space: nowrap; transition: background 0.2s; } .farina-nav__cta:hover { background: rgba(184,92,56,0.3); } /* ───────────────────────────────────────────── OVERLAY MENU ───────────────────────────────────────────── */ .farina-overlay { position: fixed; inset: 0; background: rgba(12,11,9,0.97); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .farina-overlay.is-open { opacity: 1; pointer-events: all; } .farina-overlay__close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--farina-text); font-size: 28px; font-weight: 300; line-height: 1; } .farina-overlay__nav { display: flex; flex-direction: column; align-items: center; gap: 34px; } .farina-overlay__link { font-family: var(--farina-serif); font-size: clamp(36px, 10vw, 48px); font-weight: 300; font-style: italic; letter-spacing: 0.06em; text-transform: capitalize; color: var(--farina-text); text-decoration: none; transition: color 0.2s; } .farina-overlay__link:hover { color: var(--farina-accent); } /* ───────────────────────────────────────────── SHARED PRIMITIVES ───────────────────────────────────────────── */ .farina-card { background: var(--farina-card); border: 1px solid var(--farina-border); border-radius: var(--farina-radius); overflow: hidden; } .farina-img-card { position: relative; border-radius: var(--farina-radius); overflow: hidden; } .farina-img-card img { width: 100%; height: 100%; object-fit: cover; } .farina-img-card__label { position: absolute; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farina-text); } .farina-arrow-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(240,236,228,0.3); background: rgba(240,236,228,0.05); color: var(--farina-text); font-size: 13px; text-decoration: none; transition: background 0.2s; flex-shrink: 0; } .farina-arrow-btn:hover { background: rgba(240,236,228,0.15); } /* Dividers */ .farina-divider-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; } .farina-divider-titled { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 16px; } .farina-divider-line { flex: 1; max-width: 55px; height: 1px; background: var(--farina-accent); opacity: 0.45; display: block; } .farina-diamond-sm { font-size: 8px; color: var(--farina-accent); line-height: 1; } /* ───────────────────────────────────────────── PAGE HERO (shared across inner pages) ───────────────────────────────────────────── */ .farina-page-hero { position: relative; margin: 90px 16px 0; width: calc(100% - 32px); border-radius: var(--farina-radius); overflow: hidden; aspect-ratio: 1 / 0.7; } .farina-page-hero__bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.68; } .farina-page-hero__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,11,9,0.72) 0%, transparent 55%); } .farina-page-hero__title { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--farina-serif); font-size: clamp(48px, 14vw, 64px); font-weight: 400; letter-spacing: 0.08em; color: var(--farina-accent-lt); text-transform: capitalize; white-space: nowrap; text-align: center; line-height: 1.05; } .farina-page-hero__title--italic { font-style: italic; } .farina-page-hero__title--sm { font-size: clamp(36px, 10vw, 56px); white-space: nowrap; } /* ───────────────────────────────────────────── FOOTER ───────────────────────────────────────────── */ .farina-footer { padding: 28px 16px; text-align: center; background: var(--farina-bg); } .farina-footer__diamond { font-size: 10px; color: rgba(240,236,228,0.25); } /* ───────────────────────────────────────────── HOME ───────────────────────────────────────────── */ .farina-hero { position: relative; margin: 90px 16px 0; width: calc(100% - 32px); border-radius: var(--farina-radius); overflow: hidden; background: #0d0c0a; aspect-ratio: 1 / 0.88; display: flex; align-items: flex-end; padding: 28px; } .farina-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.52; } .farina-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,11,9,0.82) 0%, rgba(12,11,9,0.08) 60%); } .farina-hero__tag { position: absolute; top: 22px; right: 22px; z-index: 2; font-family: var(--farina-sans); font-size: 9px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232,196,176,0.55); writing-mode: vertical-rl; text-orientation: mixed; } .farina-hero__title { position: relative; z-index: 2; font-family: var(--farina-serif); font-size: clamp(48px, 13vw, 66px); font-weight: 400; line-height: 0.93; letter-spacing: 0.01em; text-transform: uppercase; color: var(--farina-accent-lt); } .farina-home-cards { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; } .farina-img-card--med { aspect-ratio: 1 / 0.72; } .farina-img-card--tall { aspect-ratio: 1 / 0.9; } /* ───────────────────────────────────────────── MENU ───────────────────────────────────────────── */ .farina-tabs-wrap { padding: 22px 16px 0; } .farina-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .farina-tab { padding: 8px 18px; border: 1px solid var(--farina-border); border-radius: 100px; font-family: var(--farina-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--farina-muted); background: transparent; transition: border-color 0.2s, color 0.2s; } .farina-tab.active, .farina-tab:hover { border-color: var(--farina-accent); color: var(--farina-accent); } .farina-menu-section-title { display: flex; align-items: center; gap: 10px; justify-content: center; font-family: var(--farina-serif); font-style: italic; font-size: 24px; font-weight: 400; letter-spacing: 0.1em; color: var(--farina-accent-lt); padding: 26px 16px 4px; } .farina-menu-section-title::before, .farina-menu-section-title::after { content: '◇'; font-size: 9px; color: var(--farina-accent); opacity: 0.7; font-style: normal; } .farina-menu-items { padding: 8px 16px 24px; } .farina-menu-category { display: block; } .farina-menu-category[hidden] { display: none; } .farina-menu-item-img-wrap { padding: 10px 0; } .farina-menu-item-img-wrap img { width: 100%; aspect-ratio: 1 / 0.62; object-fit: cover; } .farina-menu-item-info { padding: 14px 0 6px; display: flex; flex-direction: column; gap: 6px; } .farina-menu-item-header { display: flex; align-items: center; gap: 6px; } .farina-menu-item-name { font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--farina-text); white-space: nowrap; } .farina-menu-item-dots { flex: 1; border-bottom: 1px dotted rgba(240,236,228,0.15); height: 1px; align-self: center; min-width: 8px; } .farina-menu-item-price { font-family: var(--farina-serif); font-size: 18px; font-weight: 400; color: var(--farina-accent-lt); white-space: nowrap; } .farina-menu-item-desc { font-size: 13px; font-weight: 300; color: var(--farina-muted); line-height: 1.65; } /* ───────────────────────────────────────────── RESERVATION FORM ───────────────────────────────────────────── */ .farina-form-wrap { padding: 18px 16px 40px; } .farina-form-card { padding: 28px 22px; } .farina-form-top { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 12px; } .farina-form-line { flex: 1; max-width: 50px; height: 1px; background: var(--farina-accent); opacity: 0.45; display: block; } .farina-form-title { font-family: var(--farina-serif); font-style: italic; font-size: 20px; letter-spacing: 0.12em; color: var(--farina-accent-lt); } .farina-form-subtitle { font-size: 13px; color: var(--farina-muted); line-height: 1.7; text-align: center; margin-bottom: 24px; } .farina-form-success { font-size: 14px; color: var(--farina-accent-lt); text-align: center; padding: 16px 0; line-height: 1.65; } .farina-form-group { margin-bottom: 18px; } .farina-form-label { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240,236,228,0.4); margin-bottom: 7px; } .farina-form-input { width: 100%; background: rgba(240,236,228,0.03); border: 1px solid var(--farina-border); border-radius: 12px; padding: 13px 15px; font-family: var(--farina-sans); font-size: 14px; font-weight: 300; color: var(--farina-text); outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; color-scheme: dark; } .farina-form-input::placeholder { color: rgba(240,236,228,0.18); } .farina-form-input:focus { border-color: var(--farina-accent); } .farina-form-submit { width: 100%; background: rgba(184,92,56,0.12); border: 1px solid rgba(184,92,56,0.3); border-radius: 12px; padding: 15px; font-family: var(--farina-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,236,228,0.5); margin-top: 6px; transition: background 0.2s, color 0.2s; } .farina-form-submit:hover { background: rgba(184,92,56,0.25); color: var(--farina-text); } /* ───────────────────────────────────────────── ABOUT ───────────────────────────────────────────── */ .farina-about-intro { padding: 18px 16px 0; } .farina-about-intro-card { padding: 30px 22px; text-align: center; } .farina-about-tagline { font-family: var(--farina-serif); font-style: italic; font-size: clamp(20px, 6vw, 26px); font-weight: 400; letter-spacing: 0.06em; color: var(--farina-accent-lt); line-height: 1.2; margin-bottom: 16px; } .farina-about-body { font-size: 13px; color: var(--farina-muted); line-height: 1.8; } .farina-about-gallery { padding: 12px 16px 0; } .farina-about-gallery img { width: 100%; aspect-ratio: 1 / 0.72; object-fit: cover; border-radius: var(--farina-radius); } .farina-awards-wrap { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; } .farina-award-card { padding: 26px 22px; text-align: center; } .farina-award-stars { font-size: 14px; letter-spacing: 4px; color: var(--farina-accent); margin-bottom: 10px; } .farina-award-name { font-family: var(--farina-serif); font-style: italic; font-size: 21px; letter-spacing: 0.1em; color: var(--farina-accent-lt); margin-bottom: 5px; } .farina-award-sub { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,236,228,0.38); } .farina-manifesto-wrap { padding: 0 16px 12px; } .farina-manifesto-card { padding: 30px 22px; text-align: center; } .farina-manifesto-text { font-family: var(--farina-serif); font-style: italic; font-size: clamp(16px, 5vw, 19px); font-weight: 300; color: rgba(232,196,176,0.72); line-height: 1.75; letter-spacing: 0.02em; } .farina-manifesto-text strong { color: var(--farina-accent-lt); font-weight: 400; font-style: normal; } .farina-story-wrap { padding: 0 16px 16px; } .farina-story-card { padding: 30px 22px; text-align: center; } .farina-story-title { font-family: var(--farina-serif); font-style: italic; font-size: 21px; letter-spacing: 0.1em; color: var(--farina-accent-lt); font-weight: 400; } .farina-story-body { font-size: 13px; color: var(--farina-muted); line-height: 1.85; } .farina-story-photo { margin: 0 16px 16px; border-radius: var(--farina-radius); overflow: hidden; } .farina-story-photo img { width: 100%; aspect-ratio: 1 / 0.72; object-fit: cover; } /* ───────────────────────────────────────────── GENERIC CONTENT (index.php fallback) ───────────────────────────────────────────── */ .farina-content { padding: 120px 16px 60px; } .farina-content-wrap { max-width: 680px; margin: 0 auto; } .farina-content h1 { font-family: var(--farina-serif); font-size: clamp(28px, 7vw, 42px); color: var(--farina-accent-lt); margin-bottom: 24px; } .farina-content p { color: var(--farina-muted); line-height: 1.8; margin-bottom: 16px; } /* ───────────────────────────────────────────── TABLET+ 768px ───────────────────────────────────────────── */ @media (min-width: 768px) { .farina-home-cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .farina-img-card--tall { grid-column: 1 / -1; aspect-ratio: 16 / 7; } .farina-awards-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } } /* ───────────────────────────────────────────── DESKTOP 1024px ───────────────────────────────────────────── */ @media (min-width: 1024px) { .farina-nav { max-width: 860px; padding: 12px 20px; } .farina-nav__cta { font-size: 11px; padding: 10px 22px; } .farina-nav__logo { font-size: 24px; } .farina-hero { aspect-ratio: 16 / 8; margin-top: 96px; } .farina-hero__title { font-size: clamp(64px, 8vw, 96px); } .farina-page-hero { aspect-ratio: 16 / 6; margin-top: 96px; } .farina-page-hero__title { font-size: clamp(56px, 7vw, 80px); } .farina-home-cards { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 24px; } .farina-img-card--tall { grid-column: 1 / -1; aspect-ratio: 16 / 6; } .farina-tabs-wrap { padding: 28px 24px 0; } .farina-menu-items { padding: 8px 24px 32px; } .farina-form-wrap { padding: 24px 24px 60px; } .farina-form-card { padding: 40px 36px; max-width: 560px; margin: 0 auto; } .farina-about-intro, .farina-about-gallery, .farina-awards-wrap, .farina-manifesto-wrap, .farina-story-wrap { padding-left: 24px; padding-right: 24px; } .farina-story-photo { margin-left: 24px; margin-right: 24px; } .farina-about-intro-card { padding: 44px 40px; } .farina-manifesto-card { padding: 44px 40px; max-width: 640px; margin: 0 auto; } }