/* ══════════════════════════════════════════════════════════════ Ivy League Club of Sarasota-Manatee A quiet, letterpress-inspired design: cream paper, hairline rules, serif headings, no visual noise. Color themes are driven by CSS variables. The admin panel sets [data-theme] on ; each VISITOR sets their own text size and contrast from the header (saved on their device). ══════════════════════════════════════════════════════════════ */ :root, [data-theme="ivy"] { --primary: #1B4D3E; --primary-ink: #113026; --accent: #A98137; --accent-soft: #EFE7D2; --bg: #FBF9F3; --surface: #FFFFFF; --ink: #24291F; --muted: #5F6458; --line: #E3DDCB; --hero-ink: #F7F3E8; } [data-theme="crimson"] { --primary: #6E1F24; --primary-ink: #491316; --accent: #A98137; --accent-soft: #EDE2CE; --bg: #FBF7F2; --surface: #fff; --ink: #29211F; --muted: #6B5F5B; --line: #E7DCD0; --hero-ink: #F9F1EA; } [data-theme="navy"] { --primary: #1E3A5F; --primary-ink: #12253E; --accent: #A98137; --accent-soft: #E7DFCB; --bg: #F8F8F5; --surface: #fff; --ink: #20242B; --muted: #59616C; --line: #DFDDD2; --hero-ink: #EFF3F8; } [data-theme="evergreen"] { --primary: #24352D; --primary-ink: #16211B; --accent: #7FA886; --accent-soft: #DCE6DD; --bg: #F5F7F3; --surface: #fff; --ink: #1F241F; --muted: #5A635C; --line: #DBE1D8; --hero-ink: #EFF4EE; } /* Visitor-chosen contrast (header "Aa" control) */ [data-contrast="high"] { --bg: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #2E2E2E; --line: #767676; --primary: #0E3327; --primary-ink: #071B14; --accent: #6F5310; --accent-soft: #EFE7D2; } [data-contrast="high"] a { text-decoration: underline; } [data-contrast="high"] :focus-visible { outline-width: 4px; } /* Visitor-chosen text size */ html { font-size: 16.5px; } html[data-fontscale="large"] { font-size: 19px; } html[data-fontscale="xlarge"] { font-size: 21.5px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.7; } h1, h2, h3, .serif { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.14; margin: 0 0 .45em; color: var(--ink); } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); } h3 { font-size: 1.32rem; } p { margin: 0 0 1em; } a { color: var(--primary); text-underline-offset: 3px; } a:hover { color: var(--primary-ink); } img { max-width: 100%; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); } .section { padding: clamp(44px, 7vw, 80px) 0; } .section.tint { background: color-mix(in srgb, var(--primary) 4%, var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .center { text-align: center; } .muted { color: var(--muted); } .lead { font-size: 1.1rem; } /* Small-caps kicker with a short gold rule */ .eyebrow { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 10px; } /* Small-caps inline label (replaces pill "chips") */ .fine-label { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .fine-label.free { color: #33691E; } [data-contrast="high"] .fine-label.free { color: #1B5E20; } /* ── Header ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(18px, 4vw, 32px); max-width: 1180px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .brand svg { flex: none; } .brand .name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.16rem; line-height: 1.1; } .brand .sub { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .nav a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem; padding: 9px 12px; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--primary); } .nav a[aria-current="page"] { color: var(--primary); font-weight: 600; border-bottom-color: var(--accent); } .nav .btn { margin-left: 10px; } .menu-btn, .a11y-btn { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; } .a11y-btn { margin-left: 6px; } .menu-btn { display: none; } @media (max-width: 940px) { .menu-btn { display: inline-flex; align-items: center; gap: 8px; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px clamp(18px, 4vw, 32px) 18px; } .nav.open { display: flex; } .nav a { padding: 13px 10px; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .nav .btn { margin: 12px 0 0; text-align: center; } } /* Reading-options panel (per-visitor) */ .a11y-panel { position: absolute; right: clamp(18px, 4vw, 32px); top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; width: min(320px, 92vw); z-index: 60; box-shadow: 0 14px 34px -18px rgba(20,25,20,.35); } .a11y-panel h4 { margin: 0 0 4px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .a11y-panel .opts { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .a11y-panel button { font: inherit; cursor: pointer; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .a11y-panel button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; } .a11y-panel .note { font-size: .82rem; color: var(--muted); margin: 0; } /* ── Buttons ────────────────────────────────────────────── */ .btn { display: inline-block; border: 1px solid var(--primary); cursor: pointer; text-decoration: none; background: var(--primary); color: #fff !important; font: inherit; font-weight: 600; font-size: .98rem; padding: 12px 24px; border-radius: 4px; } .btn:hover { background: var(--primary-ink); border-color: var(--primary-ink); } .btn.gold { background: var(--accent); border-color: var(--accent); } .btn.gold:hover { background: color-mix(in srgb, var(--accent) 82%, black); } .btn.ghost { background: transparent; color: var(--primary) !important; } .btn.ghost:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); } .btn.on-dark { background: var(--accent); border-color: var(--accent); } .btn.ghost.on-dark { background: transparent; color: var(--hero-ink) !important; border-color: color-mix(in srgb, var(--hero-ink) 55%, transparent); } .btn.ghost.on-dark:hover { background: rgba(255,255,255,.08); } .btn.big { font-size: 1.08rem; padding: 15px 30px; } .btn.small { font-size: .88rem; padding: 7px 15px; } .btn.danger { background: #7C2B2B; border-color: #7C2B2B; } .btn:disabled { opacity: .55; cursor: not-allowed; } /* ── Hero ───────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--primary) 0%, var(--primary-ink) 100%); color: var(--hero-ink); } .hero::after { /* one quiet ivy leaf, bottom right */ content: ""; position: absolute; right: -60px; bottom: -80px; width: 420px; height: 420px; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 6c4 7 12 9 17 8-1 6 2 13-8 17 5 6 1 13-9 13S10 37 15 31C5 27 8 20 7 14c5 1 13-1 17-8z' fill='none' stroke='%23ffffff' stroke-width='1.1'/%3E%3Cpath d='M24 12v26M24 19l-7-5M24 19l7-5M24 28l-8-4M24 28l8-4' stroke='%23ffffff' stroke-width='.9'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .hero .wrap { position: relative; z-index: 1; padding-top: clamp(56px, 9vw, 108px); padding-bottom: clamp(56px, 9vw, 108px); } .hero h1 { color: var(--hero-ink); } .hero .lead { max-width: 62ch; color: color-mix(in srgb, var(--hero-ink) 88%, transparent); font-size: 1.14rem; } .hero .eyebrow { color: var(--accent-soft); } .hero .eyebrow::before { background: var(--accent-soft); } .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } .stats { border-top: 1px solid rgba(255,255,255,.16); background: var(--primary-ink); color: var(--hero-ink); } .stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-top: 20px; padding-bottom: 20px; text-align: center; } .stats > .wrap > div { border-left: 1px solid rgba(255,255,255,.14); } .stats > .wrap > div:first-child { border-left: none; } .stats b { display: block; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.65rem; color: var(--accent-soft); } .stats span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } /* ── Panels & grids ─────────────────────────────────────── */ .grid { display: grid; gap: 20px; } .grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 26px 28px; } /* Event rows: an elegant ruled list, not floating cards */ .event-list { border-top: 1px solid var(--line); } .event-row { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 26px 4px; border-bottom: 1px solid var(--line); } @media (max-width: 560px) { .event-row { grid-template-columns: 1fr; gap: 8px; } } .event-date { text-align: left; } .event-date .m { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .event-date .d { display: block; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 2.4rem; line-height: 1.05; } .event-date .y { display: block; font-size: .8rem; color: var(--muted); } .event-row h3 { margin-bottom: 2px; } .event-meta { font-size: .93rem; color: var(--muted); margin-bottom: 8px; } .event-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .text-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .text-link:hover { color: var(--primary-ink); } /* Compact event cards on the home page */ .event-card { display: flex; gap: 18px; align-items: flex-start; } .event-card .event-date { flex: none; width: 64px; border-right: 1px solid var(--line); } /* Tier panels */ .tier { text-align: center; padding: 34px 28px; } .tier .price { font-family: "Cormorant Garamond", serif; font-size: 3rem; font-weight: 600; color: var(--primary); line-height: 1.1; } .tier .per { color: var(--muted); font-size: .9rem; } .tier ul { text-align: left; margin: 18px 0 24px; padding-left: 20px; } .tier li { margin-bottom: 8px; } .tier.featured { border-top: 3px solid var(--accent); } .tier .tag { display: block; margin-bottom: 10px; } /* ── Forms ──────────────────────────────────────────────── */ label { display: block; font-weight: 600; font-size: .95rem; margin: 14px 0 6px; } input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid color-mix(in srgb, var(--muted) 45%, var(--line)); border-radius: 4px; padding: 12px 14px; } input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); } textarea { min-height: 120px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .form-note { font-size: .88rem; color: var(--muted); margin-top: 10px; } .notice { border-radius: 4px; padding: 14px 18px; margin: 14px 0; font-size: .95rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .notice.ok { background: #E7EFE3; border-color: #BCD2B4; } .notice.err { background: #F6E7E4; border-color: #DFC0B8; } /* ── Tables ─────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; } table.data th { text-align: left; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--ink); position: sticky; top: 0; background: var(--surface); } table.data td { padding: 11px 16px; border-bottom: 1px solid var(--line); } table.data tr:last-child td { border-bottom: none; } /* ── Modal ──────────────────────────────────────────────── */ dialog { border: 1px solid var(--line); border-radius: 6px; padding: 0; max-width: min(560px, 92vw); width: 100%; box-shadow: 0 30px 70px -30px rgba(0,0,0,.45); } dialog::backdrop { background: rgba(22,26,21,.5); } dialog .dlg-head { background: var(--primary); color: #fff; padding: 16px 26px; display: flex; justify-content: space-between; align-items: center; } dialog .dlg-head h3 { color: #fff; margin: 0; font-weight: 600; } dialog .dlg-body { padding: 20px 26px 28px; } .dlg-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; } /* ── Footer ─────────────────────────────────────────────── */ .site-footer { background: var(--primary-ink); color: color-mix(in srgb, var(--hero-ink) 85%, transparent); margin-top: 60px; } .site-footer a { color: var(--hero-ink); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 34px; padding: 46px 0 32px; } @media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr; } } .site-footer h4 { color: var(--accent-soft); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 12px; font-weight: 600; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 7px; } .site-footer .fine { border-top: 1px solid rgba(255,255,255,.13); padding: 18px 0 26px; font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ── Utility ────────────────────────────────────────────── */ .hidden { display: none !important; } .spacer { height: 26px; } .badge-1957 { color: var(--accent); font-weight: 700; } .rule { border: none; border-top: 1px solid var(--line); margin: 26px 0; } /* ── Print (the printed directory) ──────────────────────── */ @media print { .site-header, .site-footer, .no-print, .menu-btn, .a11y-btn { display: none !important; } body { background: #fff; font-size: 11pt; } .table-wrap { border: none; } table.data { min-width: 0; } .print-title { display: block !important; text-align: center; margin-bottom: 18px; } } .print-title { display: none; }