@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); /* ============================================================ BURT'S BAGS — "Carry it well." A fictional demo site by Rooted Coast Design rootedcoastdesign.com ============================================================ */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* Palette — harbor at dawn: sailcloth, deep water, brass, leather */ --page: #EDE4D1; /* sailcloth sand — page background */ --card: #FCF8EF; /* bleached canvas — card surface (lighter than page) */ --card-2: #F5EFE1; /* alt surface */ --ink: #26303A; /* squid-ink navy — body text */ --muted: #56606B; /* fog gray — meta text (4.5:1 verified) */ --deep: #16242F; /* deep water — dark bands, footer */ --deep-2: #1D3242; /* deep water, lifted */ --deep-3: #0E1820; /* midnight hull */ --cream: #F2EADA; /* lantern light — text on dark */ --cream-dim: #B7C4CE; /* moonlit meta text on dark (4.5:1 verified) */ --brass: #C08A2E; /* brass grommet — decorative only */ --brass-text: #7A550F; /* brass, darkened for small text on light */ --brass-bright:#E3B45C; /* brass on dark surfaces */ --leather: #6B4423; /* saddle leather — script notes, decorative */ --sea: #24576C; /* harbor teal — links on light (4.5:1 verified) */ --rope: #A97E4A; /* manila rope */ --rope-dark: #8C6537; /* Type — Fraunces (display) / Karla (body) / Caveat (script accent) */ --font-display: "Fraunces", Georgia, serif; --font-body: "Karla", "Segoe UI", sans-serif; --font-script: "Caveat", cursive; /* Shape & depth */ --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --shadow-rest: 0 1px 2px rgba(22, 30, 38, 0.10), 0 4px 10px rgba(22, 30, 38, 0.08), 0 12px 28px rgba(22, 30, 38, 0.08); --shadow-lift: 0 2px 4px rgba(22, 30, 38, 0.12), 0 10px 22px rgba(22, 30, 38, 0.14), 0 26px 48px rgba(22, 30, 38, 0.16); --header-h: 74px; --container: 1120px; /* Parallax backdrop — cream wash over the striped-towel photo. Raise the alpha toward 1 for a subtler backdrop, lower it to show more towel. */ --bg-scrim: rgba(237, 228, 209, 0.68); /* Default backdrop image (used on every page unless overridden per-page below). */ --page-bg: url("../images/background.jpg"); --page-bg-size: cover; /* per-page zoom: cover fills; a % tiles smaller */ --page-bg-repeat: no-repeat; /* Inline SVG paper grain (data URI) */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Per-page parallax backdrops — add the matching class to a page's . */ body.bg-1 { --page-bg: url("../images/background.jpg"); } body.bg-2 { --page-bg: url("../images/background2.jpg"); } body.bg-6 { --page-bg: url("../images/background6.jpg"); } body.bg-7 { --page-bg: url("../images/background7.jpg"); } body.bg-12 { --page-bg: url("../images/background12.jpg"); } body.bg-9 { --page-bg: url("../images/background9.jpg"); } body.bg-10 { --page-bg: url("../images/background10.jpg"); } body.bg-11 { --page-bg: url("../images/background11.jpg"); } body.bg-13 { --page-bg: url("../images/background13.jpg"); } /* ---------- 2. RESET / BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--page); -webkit-font-smoothing: antialiased; } /* Fixed parallax backdrop: sits behind all content (z-index -1) and stays put while the page scrolls, so hero, text and cards glide over it. */ body::before { content: ""; position: fixed; /* Oversized on every side so the diagonal parallax drift never exposes an edge. */ top: -120px; left: -120px; right: -120px; bottom: -120px; z-index: -1; background-image: linear-gradient(var(--bg-scrim), var(--bg-scrim)), var(--page-bg); background-size: var(--page-bg-size); background-position: center; background-repeat: var(--page-bg-repeat); /* Diagonal drift so movement shows on vertical, horizontal or diagonal stripes. */ transform: translate3d(var(--bg-shift-x, 0px), var(--bg-shift-y, 0px), 0); will-change: transform; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.6em; color: var(--ink); /* re-colored inside dark bands below */ } h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); } h3 { font-size: 1.28rem; } p { margin: 0 0 1em; } /* NOTE: no global p color — dark bands set their own */ a { color: var(--sea); text-underline-offset: 2px; } a:hover { color: var(--deep-2); } ul { padding-left: 1.2em; } :focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 3px; } .container { max-width: var(--container); margin-inline: auto; padding-inline: 22px; } .section { padding-block: 72px; } .section-tight { padding-block: 48px; } .center { text-align: center; } .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; } .on-dark .kicker { color: var(--brass-bright); } .lead { font-size: 1.16rem; color: var(--muted); max-width: 62ch; } .center .lead { margin-inline: auto; } /* Skip link */ .skip-link { position: absolute; left: 10px; top: -60px; z-index: 300; background: var(--deep); color: var(--cream); padding: 10px 18px; border-radius: var(--radius-s); transition: top 0.2s ease; } .skip-link:focus { top: 10px; color: var(--cream); } /* Brass grommet bullet */ .grommet { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0CB7E, var(--brass) 55%, #7A550F 100%); box-shadow: inset 0 0 0 3px rgba(22,36,47,0.55), 0 1px 2px rgba(22,30,38,0.4); display: inline-block; } /* Stitched-seam divider */ .stitch { border: 0; height: 0; margin: 0 auto; max-width: min(88%, 900px); border-top: 2px dashed rgba(107, 68, 35, 0.5); position: relative; } .stitch::before, .stitch::after { content: ""; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0CB7E, var(--brass) 55%, #7A550F 100%); box-shadow: inset 0 0 0 3px rgba(22,36,47,0.5); } .stitch::before { left: -22px; } .stitch::after { right: -22px; } /* ---------- 3. ROPE SCROLL-PROGRESS ---------- */ .rope-progress { position: fixed; top: 0; left: 0; z-index: 250; height: 6px; width: 0%; background: repeating-linear-gradient(115deg, var(--rope) 0 7px, var(--rope-dark) 7px 14px); border-radius: 0 4px 4px 0; box-shadow: 0 1px 3px rgba(20, 15, 8, 0.45); } /* ---------- 4. HEADER (fixed, translucent, blurred) ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-h); background: rgba(252, 248, 239, 0.68); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid rgba(107, 68, 35, 0.25); box-shadow: 0 2px 14px rgba(22, 30, 38, 0.08); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; } .brand-mark { width: 46px; height: 46px; flex: none; border-radius: 50%; box-shadow: 0 1px 4px rgba(22,30,38,0.3); } .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--ink); line-height: 1.05; display: flex; flex-direction: column; } .brand-text em { font-style: normal; color: var(--brass-text); } .brand-text small { font-family: var(--font-script); font-weight: 600; font-size: 0.9rem; color: var(--leather); letter-spacing: 0.02em; } /* Desktop nav — single line, airy */ .nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; } .nav-panel a { display: inline-block; padding: 9px 13px; border-radius: var(--radius-s); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.95rem; line-height: 1.2; white-space: nowrap; } .nav-panel a:hover { background: rgba(36, 87, 108, 0.1); color: var(--deep); } .nav-panel a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brass); } .nav-cta a { background: var(--deep); color: var(--cream); } .nav-cta a:hover { background: var(--deep-2); color: var(--cream); } /* Burger */ .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 10px; background: var(--deep); border: 0; border-radius: var(--radius-s); cursor: pointer; } .burger span { display: block; height: 3px; border-radius: 2px; background: var(--cream); transition: transform 0.25s ease, opacity 0.25s ease; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile nav panel — anchored below header with position:absolute. (position:fixed would collapse: backdrop-filter makes the header the containing block.) Solid background, dvh with vh fallback. */ @media (max-width: 1080px) { .burger { display: flex; } .nav-panel { position: absolute; top: var(--header-h); right: 0; width: min(380px, 100%); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--card); /* solid — never translucent here */ border-left: 1px solid rgba(107, 68, 35, 0.25); box-shadow: -18px 0 40px rgba(22, 30, 38, 0.25); overflow-y: auto; transform: translateX(105%); visibility: hidden; transition: transform 0.3s ease, visibility 0.3s; } .nav-panel.open { transform: translateX(0); visibility: visible; } .nav-panel ul { flex-direction: column; align-items: stretch; gap: 2px; padding: 18px; } .nav-panel a { display: block; font-size: 1.08rem; padding: 14px 14px; border-bottom: 1px dashed rgba(107,68,35,0.3); } .nav-panel li:last-child a { border-bottom: 0; } .nav-panel a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--brass); background: var(--card-2); } .nav-cta { margin-top: 10px; } .nav-cta a { border-radius: var(--radius-s); text-align: center; } } /* ---------- 5. HERO ---------- */ .hero { position: relative; min-height: 62vh; display: grid; align-items: end; padding-top: var(--header-h); background-size: cover; background-position: center; color: var(--cream); } .hero.hero-tall { min-height: 88vh; min-height: 88dvh; align-items: center; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 17, 24, 0.60) 0%, rgba(10, 17, 24, 0.68) 45%, rgba(10, 17, 24, 0.88) 100%); } .hero-inner { position: relative; z-index: 1; padding-block: 64px; max-width: 760px; } .hero h1, .hero h2 { color: #FFFFFF; text-shadow: 0 2px 14px rgba(5, 10, 15, 0.6); } .hero h1 { font-family: "Dancing Script", cursive; font-weight: 700; font-size: clamp(2.9rem, 6.8vw, 4.8rem); line-height: 1.08; letter-spacing: 0.5px; } .hero p { color: var(--cream); font-size: 1.14rem; max-width: 56ch; text-shadow: 0 1px 8px rgba(5, 10, 15, 0.7); } .hero .kicker { /* solid dark pill: keeps 4.5:1 even where the photo is bright */ color: var(--brass-bright); background: rgba(10, 17, 24, 0.78); padding: 7px 16px; border-radius: 999px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } /* Banner hero (landing page) — full-width photo, untouched, text band below */ .hero-banner { margin-top: var(--header-h); } .hero-banner img { display: block; width: 100%; height: min(64vh, 660px); min-height: 300px; object-fit: cover; } .hero-under { padding-block: 64px 72px; } .hero-under h1 { color: #FFFFFF; } .hero-under p { font-size: 1.14rem; max-width: 62ch; margin-inline: auto; } .hero-under .kicker { color: var(--brass-bright); background: rgba(242, 234, 218, 0.08); border: 1px solid rgba(227, 180, 92, 0.35); padding: 7px 16px; border-radius: 999px; } /* Compass loading animation (landing page) */ .compass-loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--deep-3); transition: opacity 0.5s ease; } .compass-loader.done { opacity: 0; pointer-events: none; } .compass-loader svg { width: 84px; height: 84px; animation: compass-spin 1.6s ease-in-out infinite; } @keyframes compass-spin { 0% { transform: rotate(0deg); } 60% { transform: rotate(330deg); } 100% { transform: rotate(360deg); } } /* ---------- 6. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--radius-s); font-family: var(--font-body); font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; box-shadow: var(--shadow-rest); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .btn-primary { background: var(--deep); color: var(--cream); } .btn-primary:hover { background: var(--deep-2); color: var(--cream); } .btn-brass { background: var(--brass-bright); color: #221A0C; } .btn-brass:hover { background: #EFC474; color: #221A0C; } .btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: none; } .btn-ghost:hover { background: rgba(242, 234, 218, 0.14); color: #FFFFFF; } .btn-outline-dark { background: transparent; color: var(--deep); border-color: var(--deep); box-shadow: none; } .btn-outline-dark:hover { background: var(--deep); color: var(--cream); } @media (max-width: 640px) { .btn-block-mobile { width: 100%; } /* Dim the parallax backdrop a touch on phones — the light cream scrim reads too bright on small screens, so nudge it darker and slightly more opaque. */ :root { --bg-scrim: rgba(198, 188, 166, 0.74); } /* Hero on mobile: kicker + heading + subtext pinned to the top, the two CTAs pushed to the bottom of the frame and sitting side by side. */ .hero.hero-tall { align-items: stretch; background-position: right center; min-height: 100vh; min-height: 100dvh; /* fill the full phone screen, address bar accounted for */ } .hero-inner { display: flex; flex-direction: column; min-height: 100%; padding-block: 34px 40px; } .hero-actions { margin-top: auto; /* shove the buttons down to the bottom */ flex-wrap: nowrap; gap: 12px; } .hero-actions .btn { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 16px; font-size: 0.94rem; text-align: center; } } /* ---------- 7. CARDS (depth + grain + sweep bar) ---------- */ .card { position: relative; overflow: hidden; background: rgba(250, 246, 238, 0.70); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border-radius: var(--radius-m); box-shadow: var(--shadow-rest); padding: 28px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .card::before { /* gradient accent bar sweeps across top edge */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brass), var(--leather) 45%, var(--sea)); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s ease; z-index: 2; } .card::after { /* paper-grain texture */ content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); background-size: 140px 140px; opacity: 0.13; mix-blend-mode: multiply; } .card:hover { transform: translateY(-9px); box-shadow: var(--shadow-lift); } .card:hover::before { transform: scaleX(1); } .card > * { position: relative; z-index: 1; } .card h3 { display: flex; align-items: center; gap: 10px; } .card .meta { color: var(--muted); font-size: 0.95rem; } .card-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); } .card-grid.two { grid-template-columns: repeat(2, 1fr); } .card-grid.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px) { .card-grid, .card-grid.four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .card-grid, .card-grid.two, .card-grid.four { grid-template-columns: 1fr; } } /* Price cards */ .price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--deep); } .price small { font-size: 0.82rem; font-family: var(--font-body); font-weight: 700; color: var(--muted); display: block; letter-spacing: 0.06em; text-transform: uppercase; } .card ul.checks { list-style: none; padding: 0; margin: 14px 0 0; } .card ul.checks li { display: flex; gap: 10px; align-items: baseline; padding-block: 6px; border-bottom: 1px dashed rgba(107,68,35,0.25); } .card ul.checks li:last-child { border-bottom: 0; } .badge { position: absolute; top: 0; left: 0; z-index: 3; padding: 7px 16px; border-radius: 0 0 var(--radius-m) 0; background: var(--deep); color: var(--brass-bright); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } /* Cards carrying a badge get room up top so the title clears the tab */ .card:has(.badge) { padding-top: 54px; } /* Photo that bleeds to the top edges of a card; badge sits over its corner */ .card-media { display: block; width: calc(100% + 56px); max-width: none; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; margin: -54px -28px 20px; border-radius: 0; } .card:not(:has(.badge)) .card-media { margin-top: -28px; } /* ---------- 8. DARK BANDS / RC CALLOUT ---------- */ .on-dark { background: linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--cream); } .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); } .on-dark p { color: var(--cream); } .on-dark .lead, .on-dark .meta { color: var(--cream-dim); } .on-dark a { color: var(--brass-bright); } .on-dark a:hover { color: #F0CB7E; } /* Buttons keep their own text colors inside dark bands — .on-dark a would otherwise paint brass text on the brass button. */ .on-dark .btn-brass, .on-dark .btn-brass:hover { color: #221A0C; } .on-dark .btn-primary, .on-dark .btn-primary:hover { color: var(--cream); } .on-dark .btn-ghost { color: var(--cream); } .on-dark .btn-ghost:hover { color: #FFFFFF; } /* Light cards nested inside dark bands keep their own dark text — without these, .on-dark's cream text lands on the cream card. */ .on-dark .card { color: var(--ink); background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } .on-dark .card h1, .on-dark .card h2, .on-dark .card h3, .on-dark .card h4 { color: var(--ink); } .on-dark .card p { color: var(--ink); } .on-dark .card .meta { color: var(--muted); } .on-dark .card .price { color: var(--deep); } .on-dark .card .price small { color: var(--muted); } .on-dark .card a { color: var(--sea); } .on-dark .card a:hover { color: var(--deep-2); } .rc-callout { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--deep-3) 0%, var(--deep-2) 100%); color: var(--cream); border-radius: var(--radius-l); padding: 34px 34px; box-shadow: var(--shadow-lift); display: flex; flex-wrap: wrap; align-items: center; gap: 24px; border: 1px solid rgba(227, 180, 92, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .rc-callout:hover { transform: translateY(-9px); box-shadow: 0 4px 8px rgba(8, 14, 20, 0.3), 0 18px 38px rgba(8, 14, 20, 0.4), 0 34px 64px rgba(8, 14, 20, 0.35); } .rc-callout::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); background-size: 140px 140px; opacity: 0.12; } .rc-callout > div { flex: 1 1 380px; position: relative; z-index: 1; } .rc-callout .btn { position: relative; z-index: 1; } .rc-callout h2, .rc-callout h3 { color: var(--cream); margin-bottom: 8px; } .rc-callout p { color: var(--cream-dim); margin: 0; } .rc-callout .rc-tag { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-bright); display: block; margin-bottom: 10px; } /* Handwritten studio note */ .rc-note { font-family: var(--font-script); font-size: 1.45rem; line-height: 1.3; color: var(--leather); transform: rotate(-1.6deg); display: inline-block; margin-block: 8px; } .rc-note a { color: var(--leather); text-decoration-style: wavy; text-decoration-color: var(--brass); } .rc-note a:hover { color: var(--brass-text); } .on-dark .rc-note, .hero .rc-note { color: var(--brass-bright); } .on-dark .rc-note a, .hero .rc-note a { color: var(--brass-bright); } /* ---------- 9. GALLERY ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .chip { padding: 10px 20px; border-radius: 999px; cursor: pointer; background: var(--card); color: var(--ink); border: 2px solid rgba(107, 68, 35, 0.35); font-weight: 800; font-size: 0.92rem; box-shadow: var(--shadow-rest); transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .chip:hover { transform: translateY(-2px); } .chip[aria-pressed="true"] { background: var(--deep); color: var(--cream); border-color: var(--deep); } .gallery-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 940px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .gallery-grid { grid-template-columns: 1fr; } } .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-m); box-shadow: var(--shadow-rest); margin: 0; transition: transform 0.25s ease, box-shadow 0.25s ease; background: var(--card); align-self: start; } .gallery-item:hover { transform: translateY(-9px); box-shadow: var(--shadow-lift); } .gallery-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.045); } .gallery-item figcaption { position: absolute; inset: auto 0 0 0; padding: 44px 18px 14px; background: linear-gradient(180deg, rgba(10, 16, 22, 0) 0%, rgba(10, 16, 22, 0.62) 38%, rgba(10, 16, 22, 0.92) 100%); color: #FFFFFF; font-weight: 700; font-size: 0.98rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); } .gallery-item figcaption small { display: block; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-bright); text-shadow: 0 1px 4px rgba(0,0,0,0.8); } .gallery-item.hidden { display: none; } /* ---------- 10. PROCESS STEPS ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: step; } .steps > li { counter-increment: step; } .step-card { display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: start; } .step-card .num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #F0CB7E, var(--brass) 60%, #7A550F); color: #221A0C; box-shadow: var(--shadow-rest); } .step-card .num::before { content: counter(step); } @media (max-width: 560px) { .step-card { grid-template-columns: 1fr; } .step-card .num { width: 56px; height: 56px; font-size: 1.6rem; } } /* ---------- 11. FAQ ACCORDION ---------- */ .accordion { display: grid; gap: 16px; } .acc-item { padding: 0; } .acc-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; padding: 22px 26px; font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; color: var(--ink); } .acc-trigger .acc-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--brass-bright); font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; line-height: 1; transition: transform 0.3s ease; } .acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(45deg); } .acc-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; } .acc-panel-inner { padding: 0 26px 24px; color: var(--ink); border-top: 2px dashed rgba(107,68,35,0.3); } .acc-panel-inner p:first-child { padding-top: 16px; } /* ---------- 12. FORMS ---------- */ .form-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } label { font-weight: 800; font-size: 0.92rem; display: block; margin-bottom: 6px; color: var(--ink); } input, select, textarea { width: 100%; padding: 13px 14px; font: inherit; color: var(--ink); background: #FFFFFF; border: 2px solid #8A8272; border-radius: var(--radius-s); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sea); outline-offset: 1px; border-color: var(--sea); } textarea { min-height: 130px; resize: vertical; } .form-note { font-size: 0.9rem; color: var(--muted); } .form-success { display: none; margin-top: 18px; padding: 18px 22px; background: #E7F0E4; border: 2px solid #33632F; border-radius: var(--radius-s); color: #24471F; font-weight: 700; } .form-success.show { display: block; } .form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; } @media (max-width: 640px) { .form-actions .btn { width: 100%; } } /* ---------- 13. MISC LAYOUT ---------- */ .split { display: grid; gap: 42px; grid-template-columns: 1.1fr 0.9fr; align-items: center; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } .split img { border-radius: var(--radius-l); box-shadow: var(--shadow-lift); width: 100%; height: auto; } .quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-style: italic; line-height: 1.5; } .quote-card blockquote::before { content: "\201C"; display: block; font-size: 3rem; line-height: 0.6; color: var(--brass); margin-bottom: 12px; } .quote-card cite { display: block; margin-top: 16px; font-style: normal; font-weight: 800; } .quote-card cite small { display: block; font-weight: 700; color: var(--muted); font-size: 0.85rem; } .stars { color: var(--brass-text); letter-spacing: 3px; font-size: 1rem; margin-bottom: 10px; } .on-dark .stars { color: var(--brass-bright); } .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .info-list li { display: flex; gap: 12px; align-items: baseline; } .map-frame { border: 0; width: 100%; height: 340px; border-radius: var(--radius-m); box-shadow: var(--shadow-rest); display: block; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.revealed { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .card:hover, .btn:hover, .chip:hover, .gallery-item:hover, .social-row a:hover, .rc-callout:hover { transform: none; } .gallery-item:hover img { transform: none; } } /* ---------- 14. FOOTER ---------- */ .site-footer { position: relative; z-index: 1; background: linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--cream); padding-block: 56px 26px; margin-top: 80px; } .site-footer a { color: var(--brass-bright); } .site-footer a:hover { color: #F0CB7E; } .footer-grid { display: grid; gap: 36px 40px; grid-template-columns: 1.6fr 1fr 1fr 1.15fr; align-items: start; } .footer-brand-col p { max-width: 36ch; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } } .footer-grid p { color: var(--cream-dim); } .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--cream); margin-bottom: 10px; } .footer-brand em { font-style: italic; } .site-footer h4 { color: var(--cream); font-size: 1.05rem; margin-bottom: 14px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { margin-bottom: 8px; } .social-row { display: flex; gap: 12px; margin-top: 16px; } .social-row a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(242, 234, 218, 0.10); transition: background 0.2s ease, transform 0.2s ease; } .social-row a:hover { background: rgba(242, 234, 218, 0.20); transform: translateY(-2px); } .social-row a svg { width: 20px; height: 20px; fill: var(--cream); } .footer-bottom { margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(242, 234, 218, 0.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; } .footer-bottom p { margin: 0; color: var(--cream-dim); font-size: 0.9rem; } /* ---------- 15. FROSTED READING PANELS ---------- */ /* Intro & prose text over the parallax backdrop sits on translucent frosted panels so it stays readable while the towel shows through and around it. */ main .section:not(.on-dark) .reveal:not(.card):not(.card-grid):not(.gallery-item):not(.rc-callout):not(li):not(img):not(.split), main .section-tight:not(.on-dark) .reveal:not(.card):not(.rc-callout):not(li):not(img):not(.split) { background: rgba(250, 246, 238, 0.70); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--radius-l); padding: 32px 36px; box-shadow: var(--shadow-rest); } /* Small script credits / meta keep a soft cream halo where they sit off-panel. */ main .meta, .rc-note { text-shadow: 0 0 6px var(--page), 0 0 11px var(--page); } /* ---------- 17. BEACH BAG (cart) — a real recycled canvas tote ---------- */ .cart-btn { order: 3; position: relative; flex: none; width: 46px; height: 46px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--deep); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cart-btn:hover { background: rgba(36, 87, 108, 0.10); } .cart-btn svg { width: 26px; height: 26px; } .cart-btn.squish { animation: bb-squish 0.5s ease; } @keyframes bb-squish { 0% { transform: scale(1); } 28% { transform: scale(0.82, 0.7); } 55% { transform: scale(1.09, 1.03); } 78% { transform: scale(0.96, 0.98); } 100% { transform: scale(1); } } .cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--brass); color: #201603; font-size: 0.72rem; font-weight: 800; line-height: 18px; text-align: center; transform: scale(0); transition: transform 0.18s ease; } .cart-badge.has { transform: scale(1); } /* a tiny terry towel peeking out of the bag icon when it holds something */ .bb-peek { position: absolute; top: 2px; left: 50%; width: 20px; height: 9px; border-radius: 3px 3px 0 0; opacity: 0; transform: translate(-50%, 5px) scaleY(0); transform-origin: bottom; transition: transform 0.28s cubic-bezier(.3,1.4,.5,1), opacity 0.28s ease; background: repeating-linear-gradient(90deg, #e0704a 0 4px, #f2ead9 4px 7px, #3da9b4 7px 11px, #e7b23e 11px 15px); box-shadow: 0 1px 2px rgba(10,17,24,.3); } .cart-btn.has-items .bb-peek { opacity: 1; transform: translate(-50%, 0) scaleY(1); } .cart-overlay { position: fixed; inset: 0; z-index: 490; background: rgba(10, 17, 24, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .cart-overlay.show { opacity: 1; visibility: visible; } /* the tote */ .beachbag { position: fixed; top: 0; right: 0; z-index: 500; width: min(430px, 94vw); height: 100vh; height: 100dvh; overflow: visible; transform: translateX(114%); transition: transform 0.42s cubic-bezier(.28,.7,.3,1); } .beachbag.open { transform: translateX(0); } .beachbag.open .bb-strap { animation: bb-handle 0.55s ease; } @keyframes bb-handle { 0% { transform: translateY(-9px); } 45% { transform: translateY(5px); } 75% { transform: translateY(-2px); } 100% { transform: translateY(0); } } /* cotton handles that run up off the top of the viewport */ .bb-strap { position: absolute; top: -160px; width: 26px; height: 250px; z-index: 6; border-radius: 13px; background: linear-gradient(90deg, #ac8f5d, #d8c39a 42%, #cbb489 60%, #a5885a); box-shadow: inset 2px 0 0 rgba(255,255,255,.28), inset -2px 0 0 rgba(0,0,0,.2), 0 5px 12px rgba(10,17,24,.28); } .bb-strap::after { content: ""; position: absolute; inset: 5px 5px; border-left: 1.5px dashed rgba(74,54,26,.5); border-right: 1.5px dashed rgba(74,54,26,.5); border-radius: 9px; } .bb-strap-l { left: 27%; } .bb-strap-r { right: 27%; } /* canvas outer shell (woven texture + seam stitching) */ .bb-shell { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 16px 14px 16px; border-top-left-radius: 30px; border-top-right-radius: 12px; background: repeating-linear-gradient(90deg, rgba(90,66,30,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(90,66,30,.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #cdb98c, #c0a978); box-shadow: inset 0 0 0 4px #b39a67, -14px 0 36px rgba(10,17,24,.4); } .bb-shell::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(74,54,26,.5); border-radius: 22px 8px 8px 8px; pointer-events: none; z-index: 5; } /* folded lip / opening depth */ .bb-lip { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 4; background: linear-gradient(180deg, #d9c79d, #c3ac7c); border-bottom: 2px solid #b39a67; box-shadow: 0 7px 13px rgba(10,17,24,.3); } /* terry-cloth lining (colourful recycled towel, soft loops) */ .bb-lining { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 22px; padding: 20px 16px 14px; border-radius: 8px; background: radial-gradient(rgba(255,255,255,.55) 0.5px, transparent 1.2px) 0 0 / 5px 5px, repeating-linear-gradient(180deg, rgba(224,112,74,.14) 0 24px, rgba(61,169,180,.13) 24px 48px, rgba(231,178,62,.15) 48px 72px, rgba(47,93,134,.11) 72px 96px), #efe6d2; box-shadow: inset 0 17px 24px -13px rgba(10,17,24,.55), inset 0 -7px 15px -9px rgba(10,17,24,.28); } /* embroidered logo on an inside patch pocket */ .bb-pocket { position: relative; width: 66px; height: 58px; margin: 0 auto 8px; border-radius: 8px 8px 11px 11px; background: linear-gradient(180deg, #e8ddc5, #dccfb1); box-shadow: inset 0 0 0 2px rgba(74,54,26,.22), 0 3px 6px rgba(10,17,24,.18); display: grid; place-items: center; } .bb-pocket::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(74,54,26,.45); border-radius: 6px; } .bb-pocket img { width: 44px; height: 44px; border-radius: 50%; mix-blend-mode: multiply; opacity: 0.92; filter: saturate(.85) contrast(.95); } .bb-title { text-align: center; color: #4a3b25; margin: 0 0 14px; font-family: var(--font-display); font-size: 1.55rem; } .bb-empty { text-align: center; padding: 48px 14px; } .bb-empty-main { font-family: var(--font-display); font-size: 1.35rem; color: #5a4a30; margin: 0 0 6px; } .bb-empty-sub { color: #7a6a4c; margin: 0; font-style: italic; } /* items sitting inside the bag */ .bb-row { padding: 12px 4px; border-bottom: 1px dashed rgba(74,54,26,.3); } .bb-row:last-child { border-bottom: 0; } .bb-row-main { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; color: #33281a; text-shadow: 0 1px 0 rgba(255,255,255,.55); } .bb-row-price { white-space: nowrap; color: #2f5d86; } .bb-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .bb-qty button { width: 26px; height: 26px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(74,54,26,.4); background: rgba(255,255,255,.55); color: #33281a; font-weight: 800; } .bb-qty .qty-n { min-width: 20px; text-align: center; font-weight: 800; color: #33281a; } .bb-qty .bb-remove { width: auto; margin-left: auto; padding: 0 8px; height: 26px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7a6a4c; background: transparent; border-color: transparent; } .bb-qty .bb-remove:hover { color: #a3341f; } /* bottom interior: sewn canvas tag + checkout patch */ .bb-foot { flex: none; padding: 14px 8px 4px; display: flex; flex-direction: column; gap: 12px; } .bb-tag { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 12px 26px; margin: 0 6px; border-radius: 6px; background: linear-gradient(180deg, #e8ddc5, #dccfae); color: #4a3b25; font-weight: 800; font-size: 1.06rem; transform: rotate(-1.2deg); box-shadow: 0 3px 8px rgba(10,17,24,.26); } .bb-tag::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(74,54,26,.5); border-radius: 4px; } .bb-tag::after { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(74,54,26,.4); box-shadow: inset 0 0 0 1px rgba(74,54,26,.5); transform: translateY(-50%); } .bb-checkout { position: relative; display: block; text-align: center; text-decoration: none; margin: 2px 6px 6px; padding: 16px 20px; border-radius: 10px; background: linear-gradient(180deg, #e7b23e, #d79a2b); color: #2a1c05; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; transform: rotate(0.5deg); box-shadow: 0 4px 0 #a9761c, 0 8px 15px rgba(10,17,24,.3); transition: transform 0.15s ease, box-shadow 0.15s ease; } .bb-checkout::before { content: ""; position: absolute; inset: 4px; border: 2px dashed rgba(74,44,6,.5); border-radius: 7px; } .bb-checkout:hover { transform: rotate(0.5deg) translateY(-2px); box-shadow: 0 6px 0 #a9761c, 0 12px 20px rgba(10,17,24,.34); color: #2a1c05; } .bb-checkout:active { transform: rotate(0.5deg) translateY(2px); box-shadow: 0 2px 0 #a9761c, 0 5px 10px rgba(10,17,24,.3); } /* subtle rope-knot close */ .bb-close { position: absolute; top: 12px; right: 12px; z-index: 7; width: 34px; height: 34px; padding: 4px; border: 0; cursor: pointer; background: transparent; color: rgba(74,54,26,.5); } .bb-close:hover { color: #4a3b25; } .bb-close svg { width: 100%; height: 100%; } /* flying product + toast */ .bb-fly { position: fixed; z-index: 600; width: 28px; height: 28px; border-radius: 7px; pointer-events: none; background: repeating-linear-gradient(90deg, #e0704a 0 6px, #f2ead9 6px 10px, #3da9b4 10px 16px, #e7b23e 16px 22px); box-shadow: 0 3px 8px rgba(10,17,24,.35); transition: transform 0.8s cubic-bezier(.4,.5,.3,1), opacity 0.8s ease; } .bb-toast { position: fixed; z-index: 600; top: 84px; left: 50%; transform: translate(-50%, -14px); opacity: 0; pointer-events: none; background: var(--deep); color: var(--cream); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; box-shadow: 0 6px 18px rgba(10,17,24,.35); transition: transform 0.3s ease, opacity 0.3s ease; } .bb-toast.show { opacity: 1; transform: translate(-50%, 0); } /* add-to-bag button on product cards */ .add-to-cart { display: block; width: 100%; margin-top: 18px; text-align: center; } /* Checkout page */ .checkout-columns { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: start; } @media (max-width: 760px) { .checkout-columns { grid-template-columns: 1fr; } } .co-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(107,68,35,0.28); } .co-row.co-total { border-bottom: 0; border-top: 2px solid var(--brass); margin-top: 6px; font-weight: 800; font-size: 1.15rem; color: var(--ink); } .checkout-done { text-align: center; padding: 20px; } .checkout-done .grommet { margin: 0 auto 14px; width: 22px; height: 22px; flex: 0 0 22px; } /* Proud emblem in the footer */ .footer-logo { width: 118px; height: 118px; margin: 0 0 16px; border-radius: 50%; background: rgba(242, 234, 218, 0.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(227, 180, 92, 0.35); } @media (max-width: 820px) { .footer-logo { width: 132px; height: 132px; } } /* Header tidy: cart sits at the far right after the nav; no terry peek in the header */ .nav-panel { order: 2; } .bb-peek { display: none; } @media (max-width: 1080px) { .cart-btn { order: 0; } } /* Center the narrower two-across product rows under their full-width intros */ .card-grid.two { margin-inline: auto; } /* Match the intro width to the centered two-across row so the block lines up */ .section:has(> .card-grid.two) > .reveal { max-width: 800px; margin-inline: auto; } /* Line up the Add-to-Beach-Bag buttons across a row, regardless of text length */ .card:has(.price) { display: flex; flex-direction: column; } .card:has(.price) ul.checks { margin-bottom: 18px; } .card .add-to-cart { margin-top: auto; }