/* ===================================================================== REFINED FACES BY RUTH — SHARED STYLESHEET --------------------------------------------------------------------- This one file controls the look of every page. Change a value here (a color, a font) and it updates across the whole website. TABLE OF CONTENTS 1. Palette & fonts (the :root variables — edit colors here) 2. Base resets 3. Typography helpers 4. Buttons 5. Navigation bar 6. Footer 7. Floating "Text Ruth" button 8. Portfolio cards (hover zoom) 9. Scroll reveal animation 10. Misc / marquee 11. Responsive (phones & tablets) ===================================================================== */ /* --------------------------------------------------------------------- 1. PALETTE & FONTS — ★ EDIT YOUR COLORS HERE ★ Change a value once and every page that uses it updates. --------------------------------------------------------------------- */ :root { /* Dark theme (most pages) */ --ink: #17120f; /* main dark background */ --panel: #1c1611; /* secondary dark panel background */ --footer-bg: #13100d; /* footer background */ --card-bg: #1a1310; /* image placeholders behind photos*/ /* Light theme (Bridal page) */ --sand: #f4ede2; /* light page background */ --sand-panel: #fbf6ec; /* light cards / form background */ --ink-sand: #2a201a; /* dark text on light background */ /* Text */ --cream: #f0e7da; /* primary light text */ --cream-soft: #cdbdad; /* softer light text */ --muted: #a8978a; /* muted / caption text */ --muted-2: #948677; /* faint footnote text (WCAG AA) */ /* Accents */ --rose: #cc5c65; /* rose accent (labels, links) (WCAG AA) */ --wine: #920a1b; /* deep red — buttons & highlights */ --wine-dark: #7d0817; /* button hover */ /* Fonts */ --serif: 'Bodoni Moda', Georgia, serif; --sans: 'Jost', -apple-system, Segoe UI, sans-serif; --script: 'Parisienne', cursive; --accent-serif: 'Cormorant Garamond', Georgia, serif; /* Layout */ --pad-x: 56px; /* horizontal page padding */ --maxw: 1200px; /* max content width */ } /* --------------------------------------------------------------------- 2. BASE RESETS --------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; color: var(--rose); } a:hover { color: var(--cream); } ::selection { background: var(--wine); color: var(--cream); } /* A light-themed page opts in by adding class="theme-light" to */ body.theme-light { background: var(--sand); color: var(--ink-sand); } /* Keyboard accessibility: visible focus ring on whatever's focused via keyboard (not on mouse/touch clicks). !important is needed to beat one inline outline:none on the bridal page's trial-date field. */ *:focus-visible { outline: 2px solid var(--rose) !important; outline-offset: 2px !important; } /* Skip-to-content link: invisible until a keyboard user tabs to it, then jumps them straight past the repeated nav to the page's main content. */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; background: var(--wine); color: #fff; padding: 14px 22px; font-family: var(--sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: top .2s ease; } .skip-link:focus { top: 16px; } /* --------------------------------------------------------------------- 3. TYPOGRAPHY HELPERS --------------------------------------------------------------------- */ .eyebrow { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--rose); } .display { font-family: var(--serif); font-weight: 500; line-height: .98; margin: 0; } .display .italic { font-style: italic; } .section-title { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.5vw, 54px); margin: 0; } /* generic wrappers */ .wrap { max-width: var(--maxw); margin: 0 auto; } .center { text-align: center; } /* --------------------------------------------------------------------- 4. BUTTONS --------------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; padding: 16px 38px; cursor: pointer; border: none; transition: background .25s ease, border-color .25s ease, color .25s ease; text-align: center; } .btn--fill { background: var(--wine); color: #f3e8e2; } .btn--fill:hover { background: var(--wine-dark); color: #f3e8e2; } .btn--outline { background: transparent; border: 1px solid rgba(240,231,218,.4); color: var(--cream); } .btn--outline:hover { border-color: var(--cream); color: var(--cream); } /* outline on light backgrounds */ .theme-light .btn--outline { border-color: rgba(42,32,26,.4); color: var(--ink-sand); } .theme-light .btn--outline:hover { border-color: var(--ink-sand); color: var(--ink-sand); } /* --------------------------------------------------------------------- 5. NAVIGATION BAR --------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad-x); background: rgba(23,18,15,.9); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(240,231,218,.1); } /* transparent variant used over the home hero */ .nav--hero { position: absolute; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; border-bottom: none; padding: 26px var(--pad-x); } /* light variant (Bridal) */ .nav--light { background: rgba(244,237,226,.92); border-bottom: 1px solid rgba(42,32,26,.12); } /* brand lockup */ .brand { display: flex; align-items: center; gap: 15px; color: inherit; } .brand:hover { color: inherit; } .brand img { height: 42px; width: auto; } .brand .brand-words { display: flex; flex-direction: column; line-height: .86; } .brand .brand-line { display: flex; align-items: baseline; gap: 5px; } .brand .brand-name { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .nav--light .brand .brand-name { color: var(--ink-sand); } .brand .brand-by { font-family: var(--script); font-size: 17px; color: var(--rose); line-height: 1; } .nav--light .brand .brand-by { color: var(--wine); } /* nav links */ .nav-links { display: flex; gap: 34px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; } .nav-links a { color: var(--cream-soft); } .nav-links a:hover { color: var(--cream); } .nav-links a.active { color: var(--cream); border-bottom: 1px solid var(--wine); padding-bottom: 3px; } .nav--light .nav-links a { color: #6b5d50; } .nav--light .nav-links a:hover, .nav--light .nav-links a.active { color: var(--ink-sand); } .nav--light .nav-links a.active { border-bottom-color: var(--wine); } /* --------------------------------------------------------------------- 6. FOOTER --------------------------------------------------------------------- */ .footer { background: var(--footer-bg); color: var(--cream); padding: 90px var(--pad-x) 50px; } .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid rgba(240,231,218,.1); padding-bottom: 50px; } .footer-brand { display: flex; align-items: center; gap: 15px; } .footer-brand img { height: 46px; width: auto; } .footer-brand .fb-name { font-family: var(--accent-serif); font-weight: 600; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; } .footer-brand .fb-sub { font-size: 12px; color: var(--muted); margin-top: 8px; font-weight: 300; } .footer-nav { display: flex; gap: 30px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; } .footer-nav a { color: #c0b0a0; } .footer-nav a:hover, .footer-nav a.active { color: var(--cream); } .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; } .socials { display: flex; align-items: center; gap: 14px; } .socials a { width: 38px; height: 38px; border: 1px solid rgba(240,231,218,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cream-soft); } .socials a:hover { border-color: var(--rose); color: var(--cream); } .footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } /* --------------------------------------------------------------------- 7. FLOATING "TEXT RUTH" BUTTON --------------------------------------------------------------------- */ .text-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--wine); color: #f3e8e2; padding: 14px 22px; border-radius: 40px; box-shadow: 0 8px 28px rgba(0,0,0,.45); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } .text-fab:hover { background: var(--wine-dark); color: #f3e8e2; } /* --------------------------------------------------------------------- 8. PORTFOLIO CARDS (hover zoom + caption reveal) --------------------------------------------------------------------- */ .pcard { overflow: hidden; position: relative; background: var(--card-bg); } .pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.25,.46,.45,.94); } .pcard:hover img { transform: scale(1.05); } .pcard .pcard-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,18,15,.85) 0%, transparent 55%); opacity: 0; transition: opacity .45s ease; } .pcard:hover .pcard-ov { opacity: 1; } .pcard-cap { position: absolute; bottom: 22px; left: 24px; display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); } .pcard-cap .dash { width: 22px; height: 1px; background: var(--rose); display: inline-block; } /* --------------------------------------------------------------------- 9. SCROLL REVEAL ANIMATION Elements with class="reveal" fade up when scrolled into view. script.js adds the "is-visible" class. --------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .95s ease, transform .95s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------------- 10. MARQUEE TICKER (home page) --------------------------------------------------------------------- */ @keyframes rfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { overflow: hidden; padding: 19px 0; border-top: 1px solid rgba(240,231,218,.07); border-bottom: 1px solid rgba(240,231,218,.07); background: var(--ink); } .marquee-track { display: flex; white-space: nowrap; animation: rfMarquee 28s linear infinite; } .marquee-track span.grp { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #8c7a6a; } /* --------------------------------------------------------------------- 11. RESPONSIVE — phones & tablets --------------------------------------------------------------------- */ @media (max-width: 860px) { :root { --pad-x: 24px; } .nav { flex-direction: column; gap: 16px; padding: 18px 24px; } .nav-links { gap: 20px; flex-wrap: wrap; justify-content: center; } /* stack any 2+ column grids on phones */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } .split { grid-template-columns: 1fr !important; } .footer-top { flex-direction: column; align-items: flex-start; } .footer-right { align-items: flex-start; } } /* shared simple grids used across pages */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* --------------------------------------------------------------------- 12. CAROUSEL DOTS (home "Recent Looks") --------------------------------------------------------------------- */ .carousel-dot { position: relative; width: 24px; height: 24px; /* meets WCAG 2.5.8 minimum tap target */ flex-shrink: 0; border: none; cursor: pointer; padding: 0; background: transparent; outline: none; } .carousel-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: rgba(240,231,218,.28); transform: translate(-50%, -50%); transition: background .3s ease, transform .3s ease; } .carousel-dot.active::before { background: var(--rose); transform: translate(-50%, -50%) scale(1.4); } /* --------------------------------------------------------------------- 13. BRIDAL ESTIMATE CALCULATOR (used on bridal.html — script.js builds the line items) --------------------------------------------------------------------- */ .est-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(240,231,218,.12); } .est-row-main { flex: 1; } .est-row-title { font-size: 16px; color: #ece3d6; } .est-row-sub { font-size: 12.5px; color: #9a8b7a; margin-top: 4px; font-weight: 300; } .est-stepper { display: flex; align-items: center; gap: 14px; } .est-btn { width: 38px; height: 38px; border: 1px solid rgba(240,231,218,.3); background: transparent; color: var(--cream); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; } .est-btn:hover { border-color: var(--rose); } .est-count { min-width: 26px; text-align: center; font-family: var(--serif); font-size: 22px; } /* checkbox-style toggle rows */ .est-toggle { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(240,231,218,.12); cursor: pointer; } .est-check { width: 22px; height: 22px; border: 1px solid rgba(240,231,218,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .est-check-fill { width: 12px; height: 12px; background: var(--wine); display: none; } .est-price { font-family: var(--serif); font-size: 20px; color: var(--rose); } .est-note { display: flex; gap: 12px; align-items: center; padding: 14px 16px; margin-top: 14px; border: 1px solid rgba(146,10,27,.4); background: rgba(146,10,27,.08); font-size: 12.5px; line-height: 1.6; color: #cdbdad; } /* summary card */ .est-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(240,231,218,.08); } .est-line-label { font-size: 14px; color: #ece3d6; } .est-line-detail { font-size: 12px; color: #9a8b7a; margin-top: 3px; font-weight: 300; } .est-line-amt { font-family: var(--serif); font-size: 17px; color: var(--cream); white-space: nowrap; } /* pre-wedding event cards */ .est-event { border: 1px solid rgba(240,231,218,.14); padding: 18px; margin-top: 12px; position: relative; } .est-event-remove { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background: transparent; border: 1px solid rgba(240,231,218,.2); color: #9a8b7a; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .est-event-remove:hover { border-color: var(--rose); color: var(--cream); } .est-event-select { width: calc(100% - 36px); background: transparent; border: none; border-bottom: 1px solid rgba(240,231,218,.22); padding: 8px 2px; color: var(--cream); font-size: 14px; font-family: var(--sans); outline: none; cursor: pointer; margin-bottom: 16px; } .est-event-select option { background: #1a1310; } .est-event-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* --------------------------------------------------------------------- 14. POLAROID SCRAPBOOK (bridal page) Set rotation per card with inline style="--rot:-2deg" --------------------------------------------------------------------- */ .polaroid { background: #fffdf9; padding: 14px 14px 44px; box-shadow: 0 16px 34px rgba(42,32,26,.16); width: 270px; position: relative; transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px)); transition: transform .35s ease, box-shadow .35s ease; } .polaroid:hover { transform: rotate(0deg) translateY(var(--ty, 0px)) scale(1.04); box-shadow: 0 22px 44px rgba(42,32,26,.24); } .polaroid .polaroid-img { width: 100%; aspect-ratio: 4/5; overflow: hidden; } .polaroid .polaroid-img img { width: 100%; height: 100%; object-fit: cover; } .polaroid .polaroid-cap { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--script); font-size: 19px; color: var(--wine); } /* --------------------------------------------------------------------- 15. RESPONSIVE — image grids collapse on phones --------------------------------------------------------------------- */ @media (max-width: 860px) { .portfolio-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; } .portfolio-grid > * { grid-row: auto !important; grid-column: auto !important; min-height: 260px; } .edit-mosaic { grid-template-columns: 1fr !important; grid-template-rows: auto !important; } .edit-mosaic > * { grid-row: auto !important; grid-column: auto !important; min-height: 300px; } .split > div { padding: 60px 24px !important; } .est-grid { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------- 16. PHONE REFINEMENTS (≤480px) Layered on top of the 860px rules above — tablets (481-860px) keep today's behavior untouched. Nothing here reaches desktop. --------------------------------------------------------------------- */ /* Hamburger icon — hidden above 480px, so tablet/desktop nav is completely unaffected. Bars use currentColor so the light-nav variant (bridal.html) automatically gets dark bars for free. */ .nav-toggle-input { display: none; } .nav-toggle-label { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 20px; cursor: pointer; z-index: 30; color: inherit; } .nav-toggle-label span { display: block; height: 2px; width: 100%; background: currentColor; } @media (max-width: 480px) { /* Generic: trims heavy inline section padding down to something sane on a narrow screen. Add class="px-tight" to any inline-padded section wrapper that's crushing content width on phones. */ .px-tight { padding-left: 20px !important; padding-right: 20px !important; } /* Home carousel: tighter side padding, smaller/inset arrow buttons */ [data-carousel] { padding-left: 12px !important; padding-right: 12px !important; } [data-carousel-prev] { left: 8px !important; width: 38px !important; height: 38px !important; } [data-carousel-next] { right: 8px !important; width: 38px !important; height: 38px !important; } /* Bridal polaroids: the fixed 270px is too wide next to phone padding */ .polaroid { width: 42vw !important; max-width: 220px !important; } /* Bridal estimate: once .est-grid has already stacked to one column, stop the summary card from sticking - let it flow naturally. */ .est-summary { position: static !important; top: auto !important; } /* Hamburger menu (checkbox technique, no JS). .nav / .nav--hero are sticky/absolute respectively, so both already anchor an absolutely positioned .nav-links dropdown correctly. */ .nav-toggle-label { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: center; gap: 18px; max-height: 0; overflow: hidden; padding: 0; background: #17120f; transition: max-height .3s ease, padding .3s ease; } .nav--light .nav-links { background: #f4ede2; } .nav-toggle-input:checked ~ .nav-links { max-height: 420px; padding: 22px 0 26px; } }