/* ========================================================= WIKIMEDIA — Light Yoga Theme Tidy CSS (v12) - Neutral + Sage palette - Reusable tokens & gradients - Accessible focus states - Organized / commented ========================================================= */ /* -------------------------------- Fonts (keeps HTML simple) -------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;600&display=swap"); /* -------------------------------- Theme tokens / CSS variables -------------------------------- */ :root{ /* Palette */ --bg: #f6f3ee; /* paper */ --sand: #ece4d9; /* section tint */ --sage: #6f8b7a; /* accent 1 */ --ink: #1f2d2a; /* text */ --accent: #d4a373; /* accent 2 */ --muted: #8a908c; /* subdued text */ --divider: #e6ded2; /* subtle lines */ --border: #eadfce; /* card/button borders */ /* Radii / shadows */ --radius: 18px; --shadow: 0 10px 30px rgba(0,0,0,.08); /* Layout */ --container: 1100px; --gap: 20px; /* Reusable accents */ --accent-gradient: linear-gradient(90deg, var(--sage), var(--accent)); --focus-ring: #b7c8c0; /* fallback */ } /* Improve focus color when color-mix is supported */ @supports (color: color-mix(in oklab, white, black)){ :root{ --focus-ring: color-mix(in oklab, var(--sage) 45%, white); } } /* ============================== Base / Reset ============================== */ * { box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.65; } img, svg{ max-width:100%; height:auto; } /* Typography */ h1, h2, h3{ font-family: "Cormorant Garamond", serif; letter-spacing: .01em; margin: 0 0 .5rem; } a{ color: var(--ink); text-decoration: none; } a:hover{ opacity: .9; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 10px; } /* Utility text */ .eyebrow{ letter-spacing: .18em; text-transform: uppercase; color: var(--sage); font-weight: 600; font-size: .82rem; } .lead{ color: var(--muted); font-size: 1.12rem; } /* ============================== Layout helpers ============================== */ .container{ max-width: var(--container); margin: 0 auto; padding: 32px 20px; } .grid{ display: grid; gap: var(--gap); } .split{ display: grid; grid-template-columns: 1.1fr .9fr; gap: calc(var(--gap) + 2px); align-items: start; } .cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } /* ============================== Header / Navigation ============================== */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(246,243,238,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; } .brand{ font-weight: 700; letter-spacing: .02em; } .navlinks{ display: flex; gap: 16px; align-items: center; } .navlinks a{ padding: .5rem .4rem; border-radius: 10px; position: relative; } .navlinks a.active::after, .navlinks a:hover::after{ content: ""; position: absolute; left: .4rem; right: .4rem; bottom: .25rem; height: 2px; background: var(--accent-gradient); } .navlinks .cta{ background: var(--accent-gradient); color: white; padding: .55rem .9rem; border-radius: 999px; box-shadow: var(--shadow); } .menu{ display: none; background: transparent; border: 0; font-size: 1.2rem; } /* Mobile nav */ @media (max-width: 820px){ .navlinks{ display: none; } .navlinks.open{ display: flex; flex-direction: column; position: absolute; top: 58px; right: 14px; background: white; padding: 10px; border-radius: 12px; box-shadow: var(--shadow); } .menu{ display: block; } } /* ============================== Cards / Buttons / Lists ============================== */ .card{ background: linear-gradient(#fff,#fff) padding-box, linear-gradient(180deg,#f0e9df,transparent) border-box; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; } .btn{ display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: transparent; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; } .btn.primary{ background: var(--accent-gradient); color: white; border-color: transparent; } .btn.soft{ background: #fff; } .btn.icon{ display: inline-flex; align-items: center; gap: .45rem; } .btn.icon .icon-img{ width: 16px; height: 16px; } .btn:hover{ box-shadow: var(--shadow); } @media (prefers-reduced-motion: reduce){ .btn{ transition: none; } } /* Hover-lift utility (works on cards & buttons) */ .hoverlift{ transition: transform .25s ease, box-shadow .25s ease; will-change: transform; } @media (prefers-reduced-motion: no-preference){ .hoverlift:hover{ transform: translateY(-4px); box-shadow: var(--shadow); } } /* Lists */ .list{ list-style: none; margin: 0; padding: 0; } .list li{ margin: .25rem 0; } .bullets{ padding-left: 1.2rem; } .bullets li{ margin: .35rem 0; } /* Icon links (PNG or SVG) */ .icon-link{ display: inline-flex; align-items: center; gap: .45rem; } .icon-link svg{ width: 16px; height: 16px; fill: currentColor; } /* safe if you use PNGs only */ .icon-img{ width: 16px; height: 16px; display: inline-block; } /* ============================== Hero section (with optional image) ============================== */ .hero{ padding: 72px 20px; } .hero h1{ font-size: clamp(2rem, 3.5vw + 1rem, 3rem); margin: .4rem 0 .6rem; } .hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; /* copy larger than image */ gap: 24px; align-items: center; } .hero-visual{ position: relative; margin: 0; } .hero-visual img{ width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); } /* Decorative glow */ .hero-visual::after{ content: ""; position: absolute; inset: -14px -14px -18px -14px; z-index: -1; border-radius: calc(var(--radius) + 16px); background: radial-gradient(320px 220px at 20% 10%, rgba(111,139,122,.16), transparent 60%), linear-gradient(180deg, rgba(212,163,115,.10), transparent 40%); } /* ============================== About: Team cards ============================== */ .person{ display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; } .person .avatar{ width: 120px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); } .person .role{ margin: .15rem 0 .5rem; } .person .tags{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: .6rem 0 1rem; padding: 0; } .person .tags li{ background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: .25rem .6rem; font-size: .9rem; } /* --- About: two-up layout for member cards --- */ .team-grid, .grid.team{ display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 24px; align-items: start; } @media (max-width: 900px){ .team-grid, .grid.team{ grid-template-columns: 1fr; /* stack on smaller screens */ } } /* make each person card fill its grid cell height */ .card.person{ height: 100%; } /* ============================== Services: Cards with background images ============================== */ .card.service{ position: relative; overflow: hidden; isolation: isolate; min-height: 160px; /* ensure the background shows */ } .card.service::before{ /* Background image (set via inline style: --service-bg: url('/path')) */ content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--service-bg); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: inherit; filter: saturate(.85) contrast(.95) brightness(1); opacity: .40; /* tweak to taste */ } .card.service::after{ /* Soft veil for readability */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.85)); } .card.service > *{ position: relative; z-index: 1; } /* ============================== Footer ============================== */ .site-footer{ margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--divider); } .site-footer h4{ margin: .2rem 0 .6rem; } .muted{ color: var(--muted); } .footnote{ margin-top: 12px; color: var(--muted); font-size: .92rem; } .footer-grid{ /* 2fr for brand, then 3 equal columns */ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: start; gap: 20px; } .site-footer .list li{ margin: .2rem 0; } /* Column dividers (responsive) */ .footer-grid > *{ padding: 0 16px; } /* room for the line */ .footer-grid > *:first-child{ padding-left: 0; } @media (min-width: 901px){ .footer-grid > * + *{ border-left: 1px solid var(--divider); } } @media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-grid > *{ border-left: 0; padding-left: 0; } .footer-grid > *:not(:nth-child(-n+2)){ border-top: 1px solid var(--divider); padding-top: 14px; margin-top: 8px; } } @media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } .footer-grid > *:not(:first-child){ border-top: 1px solid var(--divider); padding-top: 14px; margin-top: 8px; } } /* Developer credit */ .footnote .credit{ font-weight: 600; text-underline-offset: 3px; } .footnote .credit:hover{ text-decoration: underline; } /* ============================== Utilities / A11y / Effects ============================== */ .visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Reveal-on-scroll */ .reveal{ opacity: 0; transform: translateY(18px) scale(.98); transition: all .6s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } .hoverlift{ transform: none; } } /* ============================== Responsive tweaks ============================== */ @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } .hero-copy{ order: 1; } .hero-visual{ order: 2; } } @media (max-width: 700px){ .person{ grid-template-columns: 80px 1fr; } .person .avatar{ width: 80px; } } /* --- Legal notice modal --- */ .notice{ display:none; } /* hidden by default */ .notice.is-open{ display:block; } .notice-backdrop{ position:fixed; inset:0; z-index:9999; /* above sticky header */ background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; } .notice-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); max-width:640px; width:min(640px, calc(100% - 32px)); padding:20px; } .notice-card h3{ margin:0 0 .5rem; } .notice-actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:12px; } @media (prefers-reduced-motion:no-preference){ .notice-backdrop{ animation:fadeIn .18s ease-out; } .notice-card{ transform:translateY(8px); opacity:.98; transition:transform .25s ease, opacity .25s ease; } .notice.is-open .notice-card{ transform:none; opacity:1; } } @keyframes fadeIn{ from{opacity:0} to{opacity:1} }