/* ============================================================= Positano Ristorante — Main Stylesheet HOW TO EDIT: · Colors → Edit the CSS variables in :root and [data-theme="dark"] · Fonts → Change the Google Fonts URL in every · Spacing → Adjust the --space-* variables in :root ============================================================= */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Open+Sans+Condensed:wght@300;700&display=swap'); /* ══════════════════════════════════════ DESIGN TOKENS — edit these to restyle ══════════════════════════════════════ */ :root { /* Brand palette */ --gold: #F6B34E; --gold-dark: #D99330; --gold-light: #F9C97A; --charcoal: #575D60; --charcoal-dark: #333C40; /* Semantic — light mode */ --color-bg: #FFFFFF; --color-bg-alt: #F9F6F1; --color-text: #333C40; --color-text-muted: #7E8487; --color-border: #E8EAEB; --color-card-bg: #FFFFFF; --color-nav-bg: rgba(255, 255, 255, 0.96); --color-nav-shadow: 0 2px 12px rgba(0,0,0,0.08); --color-footer-bg: #2C3437; --color-footer-text: #B8BFC2; --color-overlay: rgba(0,0,0,0.48); /* Typography */ --font-body: 'Open Sans', Helvetica, Arial, sans-serif; --font-heading: 'Open Sans Condensed', 'Open Sans', Arial, sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3.5rem; --space-xl: 6rem; /* Layout */ --nav-height: 74px; --max-width: 1100px; --radius: 3px; /* Transitions */ --transition: 0.28s ease; } /* Dark mode overrides — every color-* variable only */ [data-theme="dark"] { --color-bg: #191E20; --color-bg-alt: #21282B; --color-text: #E2DDD4; --color-text-muted: #8A9194; --color-border: #353E42; --color-card-bg: #21282B; --color-nav-bg: rgba(25, 30, 32, 0.97); --color-nav-shadow: 0 2px 18px rgba(0,0,0,0.45); --color-footer-bg: #0F1415; --color-footer-text: #666E72; --color-overlay: rgba(0,0,0,0.62); } /* ══════════════════════════════ RESET & BASE ══════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.72; transition: background var(--transition), color var(--transition); } img { max-width: 100%; height: auto; display: block; } a { color: var(--gold); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold-dark); } h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.18; color: var(--color-text); } .container { width: 90%; max-width: var(--max-width); margin: 0 auto; } /* ══════════════════════════════ NAVIGATION ══════════════════════════════ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-height); background: var(--color-nav-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--color-nav-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; width: 90%; max-width: var(--max-width); margin: 0 auto; } /* Logo block */ .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav-logo img { height: 48px; width: auto; max-width: 180px; object-fit: contain; } /* Invert the black-on-white logo in dark mode */ [data-theme="dark"] .nav-logo img { filter: invert(1) brightness(0.88); } .nav-logo-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text); line-height: 1.1; transition: color var(--transition); } .nav-logo-name span { display: block; font-family: var(--font-body); font-weight: 300; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); } /* Nav links */ .nav-links { display: flex; list-style: none; gap: var(--space-md); align-items: center; } .nav-links a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); } /* Controls (dark toggle + hamburger) */ .nav-controls { display: flex; align-items: center; gap: var(--space-sm); } .theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: 18px; padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.85rem; color: var(--color-text); display: flex; align-items: center; gap: 0.3rem; transition: border-color var(--transition), color var(--transition), background var(--transition); } .theme-toggle:hover { border-color: var(--gold); color: var(--gold); } .icon-light { display: inline; } .icon-dark { display: none; } [data-theme="dark"] .icon-light { display: none; } [data-theme="dark"] .icon-dark { display: inline; } /* Hamburger */ .nav-hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text); transition: background var(--transition); } /* ══════════════════════════════ HERO ══════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--charcoal-dark); } .hero-bg { position: absolute; inset: 0; /* Edit: replace with your preferred hero photo */ background-image: url('/images/positanoroom.jpg'); background-size: cover; background-position: center 30%; background-attachment: fixed; } .hero-overlay { position: absolute; inset: 0; background: var(--color-overlay); transition: background var(--transition); } .hero-content { position: relative; z-index: 1; text-align: center; color: #fff; padding: var(--space-lg) var(--space-sm); max-width: 860px; } .hero-eyebrow { font-size: 0.68rem; font-weight: 300; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-sm); } .hero-title { font-family: var(--font-heading); font-size: clamp(3.2rem, 9vw, 8rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.38); margin-bottom: 0.4rem; } .hero-subtitle { font-size: 0.9rem; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: var(--space-md); } .hero-rule { width: 56px; height: 2px; background: var(--gold); margin: 0 auto var(--space-md); } .hero-tagline { font-size: 1.15rem; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.84); margin-bottom: var(--space-lg); } .hero-cta { display: inline-flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; } /* ══════════════════════════════ BUTTONS ══════════════════════════════ */ .btn { display: inline-block; padding: 0.88rem 2.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); text-decoration: none; line-height: 1; } .btn-primary { background: var(--gold); color: var(--charcoal-dark); border: 2px solid var(--gold); } .btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; } .btn-outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.65); } .btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; } .btn-gold { background: var(--gold); color: var(--charcoal-dark); border: 2px solid var(--gold); } .btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; } .btn-outline { background: transparent; color: var(--color-text); border: 2px solid var(--color-border); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-danger { background: #c0392b; color: #fff; border: 2px solid #c0392b; padding: 0.38rem 0.8rem; font-size: 0.68rem; } .btn-danger:hover { background: #a93226; border-color: #a93226; } /* ══════════════════════════════ SECTION BASE ══════════════════════════════ */ section { padding: var(--space-xl) 0; } .section-eyebrow { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-xs); } .section-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); margin-bottom: var(--space-sm); } .section-rule { width: 48px; height: 2px; background: var(--gold); margin-bottom: var(--space-md); } /* ══════════════════════════════ ABOUT ══════════════════════════════ */ .about-section { background: var(--color-bg); transition: background var(--transition); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .about-text p { color: var(--color-text-muted); font-size: 1.04rem; margin-bottom: var(--space-sm); } .about-image img { width: 100%; height: 500px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,0.14); } /* ══════════════════════════════ PHOTO STRIP ══════════════════════════════ */ .photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .photo-strip img { width: 100%; height: 300px; object-fit: cover; transition: opacity 0.35s ease; } .photo-strip img:hover { opacity: 0.82; } /* ══════════════════════════════ HOURS ══════════════════════════════ */ .hours-section { background: var(--color-bg-alt); transition: background var(--transition); } .hours-intro { text-align: center; margin-bottom: var(--space-lg); } .hours-intro p { color: var(--color-text-muted); max-width: 500px; margin: 0 auto; } .hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); } .hours-card { background: var(--color-card-bg); border: 1px solid var(--color-border); padding: var(--space-md) var(--space-md); border-radius: var(--radius); transition: background var(--transition), border-color var(--transition); } .hours-card h3 { font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); } .hours-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .hours-table tr { border-bottom: 1px solid var(--color-border); } .hours-table tr:last-child { border-bottom: none; } .hours-table td { padding: 0.55rem 0; color: var(--color-text-muted); } .hours-table td:last-child { text-align: right; } /* ══════════════════════════════ CONTACT / LOCATION ══════════════════════════════ */ .contact-section { background: var(--color-bg); transition: background var(--transition); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); } .contact-card { text-align: center; padding: var(--space-md) var(--space-sm); } .contact-icon { font-size: 2.2rem; margin-bottom: var(--space-xs); } .contact-card h3 { font-family: var(--font-heading); font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .contact-card p, .contact-card a { font-size: 0.95rem; color: var(--color-text-muted); } /* Reservations banner */ .reservations-banner { background: var(--charcoal-dark); color: #fff; text-align: center; padding: var(--space-xl) var(--space-sm); } [data-theme="dark"] .reservations-banner { background: var(--color-bg-alt); } .reservations-banner h2 { color: #fff; font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-xs); } [data-theme="dark"] .reservations-banner h2 { color: var(--color-text); } .reservations-banner p { color: rgba(255,255,255,0.7); margin-bottom: var(--space-md); font-size: 1.05rem; } [data-theme="dark"] .reservations-banner p { color: var(--color-text-muted); } /* ══════════════════════════════ FOOTER ══════════════════════════════ */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); text-align: center; padding: var(--space-lg) var(--space-sm); transition: background var(--transition); } .footer-logo { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; } .footer-tagline { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.6; margin-bottom: var(--space-md); } .footer-links { display: flex; justify-content: center; gap: var(--space-md); list-style: none; margin-bottom: var(--space-md); flex-wrap: wrap; } .footer-links a { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-footer-text); opacity: 0.65; transition: opacity var(--transition), color var(--transition); } .footer-links a:hover { opacity: 1; color: var(--gold); } .footer-copy { font-size: 0.72rem; opacity: 0.42; } /* ── Gallery promo strip ── */ .gallery-promo { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-lg) var(--space-sm); } .gallery-promo-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } .gallery-promo-text h2 { font-family: var(--font-heading); font-size: 1.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-heading); margin: 0.3rem 0 0.5rem; } .gallery-promo-text p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; } @media (max-width: 600px) { .gallery-promo-inner { flex-direction: column; text-align: center; } } /* ── Footer maps ── */ .footer-maps { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: var(--space-lg); } .footer-map-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .footer-map-label { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; color: var(--gold); font-weight: 600; } .footer-map-item iframe { border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; width: min(320px, 90vw); height: 200px; display: block; } /* ══════════════════════════════ MENU PAGE ══════════════════════════════ */ .page-header { padding-top: calc(var(--nav-height) + var(--space-lg)); padding-bottom: var(--space-lg); background: var(--color-bg-alt); text-align: center; border-bottom: 1px solid var(--color-border); transition: background var(--transition), border-color var(--transition); } .tab-bar { display: flex; justify-content: center; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-lg); transition: border-color var(--transition); } .tab-btn { background: none; border: none; padding: 0.9rem 2.2rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--transition), border-color var(--transition); } .tab-btn:hover { color: var(--gold); } .tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); } .menu-section { display: none; padding: var(--space-lg) 0; } .menu-section.active { display: block; } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); } .image-grid img { width: 100%; border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,0.09); cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease; } .image-grid img:hover { transform: translateY(-4px); box-shadow: 0 14px 42px rgba(0,0,0,0.16); } .empty-state { text-align: center; padding: var(--space-xl) 0; display: none; } .empty-state p { color: var(--color-text-muted); font-style: italic; font-size: 1.05rem; } /* Lightbox */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 999; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); } .lightbox-close { position: absolute; top: 1.5rem; right: 2rem; font-size: 2.2rem; color: #fff; background: none; border: none; cursor: pointer; line-height: 1; opacity: 0.7; transition: opacity var(--transition); } .lightbox-close:hover { opacity: 1; } /* ══════════════════════════════ ADMIN PAGE ══════════════════════════════ */ .admin-page { padding-top: calc(var(--nav-height) + var(--space-lg)); min-height: 100vh; background: var(--color-bg); transition: background var(--transition); } .admin-card { max-width: 460px; margin: 0 auto var(--space-xl); background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.07); transition: background var(--transition), border-color var(--transition); } .admin-panel { max-width: 820px; margin: 0 auto; padding-bottom: var(--space-xl); } .form-group { margin-bottom: var(--space-sm); } .form-group label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.4rem; } .form-group input, .form-group select { width: 100%; padding: 0.78rem 1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); font-size: 1rem; font-family: var(--font-body); outline: none; transition: border-color var(--transition), background var(--transition), color var(--transition); appearance: auto; } .form-group input:focus, .form-group select:focus { border-color: var(--gold); } .form-group input[type="file"] { padding: 0.6rem 0.75rem; cursor: pointer; } .msg { font-size: 0.85rem; margin-top: var(--space-xs); display: none; } .msg.visible { display: block; } .msg-error { color: #c0392b; } .msg-success { color: #27ae60; } .admin-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); flex-wrap: wrap; } .admin-tab-btn { padding: 0.5rem 1.3rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; color: var(--color-text-muted); transition: all var(--transition); } .admin-tab-btn.active, .admin-tab-btn:hover { background: var(--gold); color: var(--charcoal-dark); border-color: var(--gold); } .admin-image-item { display: flex; align-items: center; gap: var(--space-sm); padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-xs); background: var(--color-card-bg); transition: background var(--transition), border-color var(--transition); } .admin-image-item img { width: 72px; height: 52px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; } .admin-image-item .img-name { flex: 1; font-size: 0.82rem; color: var(--color-text-muted); word-break: break-all; } .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--color-border); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 0.4rem; } @keyframes spin { to { transform: rotate(360deg); } } /* ══════════════════════════════ UTILITIES ══════════════════════════════ */ .text-center { text-align: center; } .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .hidden { display: none !important; } /* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */ @media (max-width: 768px) { .nav-links { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--color-nav-bg); flex-direction: column; padding: var(--space-sm); border-bottom: 1px solid var(--color-border); gap: 0; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.85rem var(--space-sm); border-bottom: 1px solid var(--color-border); } .nav-hamburger { display: flex; } .about-grid { grid-template-columns: 1fr; } .about-image img { height: 300px; } .photo-strip { grid-template-columns: 1fr; } .photo-strip img { height: 220px; } .tab-btn { padding: 0.75rem 1rem; font-size: 0.72rem; } .image-grid { grid-template-columns: 1fr; } .hero-bg { background-attachment: scroll; } }