/* ============================================================= STUDIO COCCI MORENA — Il Commercialista Digitale Design system editoriale, accessibile, responsive ============================================================= */ /* ------------------------------------------------------------- 1. RESET + BASE ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--cream); } /* ------------------------------------------------------------- 2. DESIGN TOKENS ------------------------------------------------------------- */ :root { /* Type */ --font-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-body: 1.0625rem; /* 17 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.75rem; /* 28 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 3rem; /* 48 */ --fs-4xl: 4rem; /* 64 */ --fs-display: clamp(3rem, 7vw + 1rem, 7.5rem); --fs-display-sm: clamp(2.25rem, 4vw + 0.5rem, 4rem); --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.6; --lh-loose: 1.8; /* Palette — base */ --cream: #F5EFE3; --cream-soft: #FAF6EC; --paper: #FFFFFF; --ink: #1A1612; --ink-soft: #3A332A; --muted: #6B6258; --muted-soft: #9A9085; --line: #DCD3C2; --line-soft: #E8DFCE; /* Accents — terracotta as base brand */ --accent: #B5482F; --accent-dark: #8B3621; --accent-soft: #F2D8C8; --accent-tint: #F9E9DD; /* Audience-specific (light overlay) */ --aziende: #B5482F; /* terracotta — pratica, calda */ --aziende-soft: #F2D8C8; --professionisti: #1F3A3D; /* deep teal — autorevole, tecnico */ --professionisti-soft: #D7E0DD; /* Semantic */ --gold: #B8893D; --olive: #6B7A3F; /* Layout */ --container: 1320px; --container-text: 760px; --container-narrow: 1080px; --gap-1: 0.5rem; --gap-2: 1rem; --gap-3: 1.5rem; --gap-4: 2rem; --gap-5: 3rem; --gap-6: 4.5rem; --gap-7: 6.5rem; --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.06); --shadow: 0 6px 24px -8px rgba(26, 22, 18, 0.12); --shadow-lg: 0 24px 48px -16px rgba(26, 22, 18, 0.18); --header-h: 76px; } /* Audience theming — applied to */ body[data-audience="aziende"] { --accent: var(--aziende); --accent-soft: var(--aziende-soft); --accent-dark: #8B3621; } body[data-audience="professionisti"] { --accent: var(--professionisti); --accent-soft: var(--professionisti-soft); --accent-dark: #122529; } /* ------------------------------------------------------------- 3. TYPOGRAPHY ------------------------------------------------------------- */ .serif { font-family: var(--font-serif); } .mono { font-family: var(--font-mono); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: var(--lh-snug); font-variation-settings: "opsz" 32, "SOFT" 30; } h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); font-weight: 600; } .display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.04em; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 0; } .display-sm { font-family: var(--font-serif); font-size: var(--fs-display-sm); line-height: 1; letter-spacing: -0.025em; font-weight: 400; } .kicker { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.18em; color: var(--accent); font-weight: 500; } .dek { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-soft); font-style: italic; font-weight: 400; } .lead { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft); } .byline { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } p { max-width: 70ch; } p + p { margin-top: 1em; } strong { font-weight: 600; color: var(--ink); } em { font-style: italic; } /* Drop cap */ .dropcap::first-letter { font-family: var(--font-serif); font-weight: 500; font-size: 5.4em; line-height: 0.85; float: left; margin: 0.05em 0.08em -0.05em 0; color: var(--accent); font-variation-settings: "opsz" 144; } /* ------------------------------------------------------------- 4. LAYOUT PRIMITIVES ------------------------------------------------------------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } .container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } .container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } section { padding-block: var(--gap-7); position: relative; } section.tight { padding-block: var(--gap-5); } .skip-link { position: absolute; top: -100px; left: 0; background: var(--ink); color: var(--cream); padding: 1rem 1.5rem; z-index: 999; font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; } .skip-link:focus { top: 0; } .divider { border: 0; border-top: 1px solid var(--line); margin: var(--gap-5) 0; } .divider-thick { border-top-width: 2px; border-color: var(--ink); } /* ------------------------------------------------------------- 5. HEADER / NAV ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(245, 239, 227, 0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); height: var(--header-h); display: flex; align-items: center; transition: box-shadow 0.3s ease; } .site-header.scrolled { box-shadow: var(--shadow-sm); } .site-header > .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--gap-3); } .brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink); } .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--cream); border-radius: 50%; font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: 1.1rem; letter-spacing: -0.04em; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-text small { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); font-weight: 500; } .nav-main { display: flex; align-items: center; gap: var(--gap-3); font-size: var(--fs-sm); } .nav-main a { position: relative; padding: 0.4rem 0.2rem; color: var(--ink-soft); font-weight: 500; transition: color 0.2s ease; } .nav-main a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s ease; } .nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--ink); } .nav-main a:hover::after, .nav-main a[aria-current="page"]::after { width: 100%; } .nav-group { position: relative; } .nav-group > button { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.2rem; color: var(--ink-soft); font-weight: 500; font-size: var(--fs-sm); } .nav-group > button::after { content: "▾"; font-size: 0.7em; opacity: 0.6; transition: transform 0.2s ease; } .nav-group[aria-expanded="true"] > button::after { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 8px); left: -1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem; min-width: 280px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .nav-group[aria-expanded="true"] .nav-dropdown, .nav-group:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); } .nav-dropdown a:hover { background: var(--cream); } .nav-dropdown a::after { display: none; } .nav-dropdown .group-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding: 0.3rem 0.75rem 0.4rem; } .audience-switch { display: inline-flex; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 4px; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; position: relative; } .audience-switch button { padding: 0.5rem 0.9rem; border-radius: 100px; color: var(--muted); transition: color 0.3s ease; position: relative; z-index: 2; white-space: nowrap; } .audience-switch button[aria-pressed="true"] { color: var(--paper); } .audience-switch::before { content: ""; position: absolute; inset: 4px; width: calc(50% - 4px); border-radius: 100px; background: var(--accent); transition: transform 0.35s cubic-bezier(0.5, 1.5, 0.5, 1); z-index: 1; } .audience-switch[data-active="professionisti"]::before { transform: translateX(100%); } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; background: var(--ink); color: var(--cream); border-radius: 100px; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.01em; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--ink); white-space: nowrap; } .btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); } .btn-accent { background: var(--accent); border-color: var(--accent); } .btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .btn-large { padding: 1rem 1.8rem; font-size: var(--fs-md); } .btn .arrow { transition: transform 0.25s ease; } .btn:hover .arrow { transform: translateX(3px); } .menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); align-items: center; justify-content: center; } .menu-toggle span { position: relative; width: 18px; height: 1.5px; background: var(--ink); display: block; } .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.3s ease, top 0.3s ease; } .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; } body.menu-open .menu-toggle span { background: transparent; } body.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); } body.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); } /* ------------------------------------------------------------- 6. HERO ------------------------------------------------------------- */ .hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 80% 30%, var(--accent-tint) 0%, transparent 50%), radial-gradient(ellipse 50% 60% at 10% 80%, rgba(31, 58, 61, 0.06) 0%, transparent 50%); pointer-events: none; z-index: 0; transition: background 0.6s ease; } .hero > * { position: relative; z-index: 1; } .hero-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--gap-4); flex-wrap: wrap; } .hero-meta .pulse { display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; position: relative; } .hero-meta .pulse::before { content: ""; position: absolute; inset: -4px; border: 2px solid var(--accent); border-radius: 50%; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .hero-title { font-family: var(--font-serif); font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.04em; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 0; margin-bottom: var(--gap-3); max-width: 12ch; } .hero-title em { font-style: italic; color: var(--accent); font-variation-settings: "opsz" 144, "SOFT" 100; } .hero-dek { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.4; color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--gap-4); font-style: italic; font-weight: 400; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--gap-4); } .hero-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--gap-5); align-items: center; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } } .hero-aside { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); } .hero-aside img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.92); } .hero-aside .label { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; background: rgba(245, 239, 227, 0.92); backdrop-filter: blur(10px); padding: 1rem 1.25rem; border-radius: var(--radius); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-md); border-left: 3px solid var(--accent); } .hero-aside .label small { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-style: normal; color: var(--muted); margin-bottom: 0.3rem; } .hero-stats { display: flex; gap: var(--gap-4); margin-top: var(--gap-5); padding-top: var(--gap-4); border-top: 1px solid var(--line); flex-wrap: wrap; } .hero-stat strong { display: block; font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); line-height: 1; } .hero-stat span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 0.4rem; display: block; } /* ------------------------------------------------------------- 7. AUDIENCE PROMPT (entry choice) ------------------------------------------------------------- */ .audience-prompt { background: var(--ink); color: var(--cream); padding: var(--gap-6) 0; position: relative; overflow: hidden; } .audience-prompt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(181, 72, 47, 0.18), transparent 40%), radial-gradient(circle at 80% 50%, rgba(31, 58, 61, 0.25), transparent 40%); pointer-events: none; } .audience-prompt > * { position: relative; } .audience-prompt h2 { color: var(--cream); margin-bottom: var(--gap-3); } .audience-prompt .lead { color: rgba(245, 239, 227, 0.75); } .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); margin-top: var(--gap-5); } @media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr; } } .audience-card { background: rgba(245, 239, 227, 0.06); border: 1px solid rgba(245, 239, 227, 0.14); border-radius: var(--radius-xl); padding: 2.25rem; text-align: left; display: flex; flex-direction: column; gap: 1rem; transition: all 0.4s cubic-bezier(0.2, 1, 0.4, 1); cursor: pointer; position: relative; overflow: hidden; color: var(--cream); } .audience-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand-color, var(--accent)) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; } .audience-card:hover { transform: translateY(-4px); border-color: var(--brand-color, var(--accent)); } .audience-card:hover::before { opacity: 0.18; } .audience-card > * { position: relative; } .audience-card[data-target="aziende"] { --brand-color: #D9694F; } .audience-card[data-target="professionisti"] { --brand-color: #4A6B6E; } .audience-card h3 { font-size: var(--fs-2xl); color: var(--cream); margin-bottom: 0.4rem; font-style: italic; } .audience-card p { color: rgba(245, 239, 227, 0.78); font-size: var(--fs-sm); } .audience-card .arrow-circle { margin-top: auto; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(245, 239, 227, 0.3); display: grid; place-items: center; transition: all 0.3s ease; } .audience-card:hover .arrow-circle { background: var(--brand-color); border-color: var(--brand-color); transform: rotate(-45deg); } .audience-card .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 239, 227, 0.5); } /* ------------------------------------------------------------- 8. PILASTRI ------------------------------------------------------------- */ .pilastri { background: var(--cream-soft); border-block: 1px solid var(--line); } .pilastri-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); margin-bottom: var(--gap-5); align-items: end; } @media (max-width: 800px) { .pilastri-header { grid-template-columns: 1fr; } } .pilastri-header h2 { font-size: var(--fs-3xl); max-width: 14ch; } .pilastri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3); position: relative; } @media (max-width: 900px) { .pilastri-grid { grid-template-columns: 1fr; } } .pilastro { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; min-height: 380px; position: relative; transition: all 0.4s cubic-bezier(0.2, 1, 0.4, 1); overflow: hidden; } .pilastro::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .pilastro:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--ink); } .pilastro:hover::after { transform: scaleX(1); } .pilastro .num { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-3xl); font-weight: 400; color: var(--accent); line-height: 1; margin-bottom: var(--gap-3); } .pilastro h3 { font-size: var(--fs-xl); margin-bottom: 0.75rem; } .pilastro p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; } .pilastro .moment { margin-top: auto; padding-top: var(--gap-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-soft); } .pilastro .read { margin-top: var(--gap-2); display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px; align-self: flex-start; } .pilastro .read .arrow { transition: transform 0.2s ease; } .pilastro:hover .read .arrow { transform: translateX(4px); } .pilastri-link-note { margin-top: var(--gap-4); padding: 1.5rem 2rem; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--muted); font-style: italic; } /* ------------------------------------------------------------- 9. AREE TEMATICHE (9 SEZIONI) ------------------------------------------------------------- */ .aree-tematiche { background: var(--cream); } .aree-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-3); margin-top: var(--gap-5); } .area-card { grid-column: span 4; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; transition: all 0.35s ease; position: relative; overflow: hidden; min-height: 260px; } .area-card.large { grid-column: span 6; min-height: 320px; } .area-card .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); } .area-card h3 { font-size: var(--fs-lg); } .area-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; } .area-card .area-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--cream); border-radius: 50%; margin-bottom: 0.5rem; } .area-card .area-icon svg { width: 22px; height: 22px; stroke: var(--ink); } .area-card .tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; } .area-card .tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); } .area-card .tag.az { color: var(--aziende); border-color: var(--aziende-soft); background: rgba(181, 72, 47, 0.06); } .area-card .tag.pr { color: var(--professionisti); border-color: var(--professionisti-soft); background: rgba(31, 58, 61, 0.06); } .area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--ink); } .area-card:hover .area-icon { background: var(--accent-tint); } .area-card .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } @media (max-width: 1000px) { .aree-grid { grid-template-columns: repeat(6, 1fr); } .area-card { grid-column: span 3; } .area-card.large { grid-column: span 6; } } @media (max-width: 640px) { .aree-grid { grid-template-columns: 1fr; } .area-card, .area-card.large { grid-column: 1; } } /* ------------------------------------------------------------- 10. METODO ZERO ANSIA ------------------------------------------------------------- */ .metodo { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; } .metodo::before { content: "“"; position: absolute; top: -3rem; left: -1rem; font-family: var(--font-serif); font-size: 30rem; line-height: 1; color: rgba(245, 239, 227, 0.04); pointer-events: none; } .metodo .container { position: relative; } .metodo .kicker { color: var(--accent-soft); } .metodo h2 { color: var(--cream); margin-bottom: var(--gap-3); max-width: 16ch; } .metodo .lead { color: rgba(245, 239, 227, 0.75); max-width: 60ch; margin-bottom: var(--gap-5); } .metodo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3); } @media (max-width: 800px) { .metodo-grid { grid-template-columns: 1fr; } } .metodo-item { padding: 2rem; background: rgba(245, 239, 227, 0.04); border: 1px solid rgba(245, 239, 227, 0.12); border-radius: var(--radius-lg); position: relative; } .metodo-item .step { position: absolute; top: -14px; left: 1.5rem; background: var(--accent); color: var(--cream); padding: 0.25rem 0.7rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; border-radius: 100px; } .metodo-item h4 { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-xl); color: var(--cream); margin: 0.4rem 0 0.7rem; } .metodo-item p { color: rgba(245, 239, 227, 0.72); font-size: var(--fs-sm); } /* ------------------------------------------------------------- 11. ARTICOLI / GIORNALE FEED ------------------------------------------------------------- */ .articoli { background: var(--cream-soft); } .articoli-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: var(--gap-5); gap: var(--gap-3); flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 1.5rem; } .masthead { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 400; font-style: italic; letter-spacing: -0.02em; } .articoli-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); display: flex; gap: 1.5rem; flex-wrap: wrap; } .articoli-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--gap-4); } @media (max-width: 1000px) { .articoli-grid { grid-template-columns: 1fr 1fr; } .articolo:first-child { grid-column: span 2; } } @media (max-width: 640px) { .articoli-grid { grid-template-columns: 1fr; } .articolo:first-child { grid-column: 1; } } .articolo { display: flex; flex-direction: column; gap: 0.85rem; padding-bottom: var(--gap-3); border-bottom: 1px solid var(--line); position: relative; } .articolo:hover h3 { color: var(--accent); } .articolo h3 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.02em; transition: color 0.2s ease; } .articolo:first-child h3 { font-size: var(--fs-2xl); } .articolo .img-wrap { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--ink); } .articolo .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .articolo:hover .img-wrap img { transform: scale(1.04); } .articolo .meta { display: flex; gap: 0.75rem; align-items: center; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .articolo .meta .cat { color: var(--accent); font-weight: 600; } .articolo p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; } .articolo .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ------------------------------------------------------------- 12. ACADEMY PREVIEW ------------------------------------------------------------- */ .academy-promo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--gap-4); } @media (max-width: 900px) { .academy-promo { grid-template-columns: 1fr; } } .academy-text { padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; } .academy-text .price-tag { display: inline-flex; align-items: baseline; gap: 0.4rem; margin-top: var(--gap-3); margin-bottom: var(--gap-3); } .academy-text .price-tag strong { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 400; letter-spacing: -0.02em; color: var(--accent); } .academy-text .price-tag span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .academy-features { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin: var(--gap-3) 0; } .academy-features li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); } .academy-features svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); } .academy-visual { background: linear-gradient(135deg, #1A1612 0%, #3A2820 100%); position: relative; display: grid; place-items: center; min-height: 440px; overflow: hidden; } .academy-visual .play-btn { width: 84px; height: 84px; border-radius: 50%; background: rgba(245, 239, 227, 0.95); display: grid; place-items: center; cursor: pointer; transition: transform 0.3s ease; z-index: 2; } .academy-visual .play-btn::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(245, 239, 227, 0.3); animation: pulse-ring 2.4s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .academy-visual .play-btn:hover { transform: scale(1.08); } .academy-visual .play-icon { width: 0; height: 0; border-left: 18px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 4px; } .academy-visual .episodes { position: absolute; bottom: 1.5rem; left: 1.5rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245, 239, 227, 0.7); } .academy-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(181, 72, 47, 0.35), transparent 50%), radial-gradient(circle at 70% 70%, rgba(184, 137, 61, 0.25), transparent 50%); } /* ------------------------------------------------------------- 13. NEWSLETTER ------------------------------------------------------------- */ .newsletter { background: var(--accent); color: var(--cream); padding-block: var(--gap-6); } .newsletter .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); align-items: center; } @media (max-width: 800px) { .newsletter .container { grid-template-columns: 1fr; } } .newsletter h2 { color: var(--cream); } .newsletter p { color: rgba(245, 239, 227, 0.85); } .newsletter-form { display: flex; gap: 0.5rem; background: rgba(245, 239, 227, 0.1); border: 1px solid rgba(245, 239, 227, 0.25); border-radius: 100px; padding: 6px; } .newsletter-form input { flex: 1; padding: 0.85rem 1.2rem; background: transparent; border: 0; color: var(--cream); font-size: var(--fs-sm); outline: none; } .newsletter-form input::placeholder { color: rgba(245, 239, 227, 0.6); } .newsletter-form button { padding: 0.85rem 1.5rem; background: var(--cream); color: var(--ink); border-radius: 100px; font-size: var(--fs-sm); font-weight: 500; transition: all 0.2s ease; } .newsletter-form button:hover { background: var(--ink); color: var(--cream); } .newsletter-segments { display: flex; gap: 1.25rem; margin-top: var(--gap-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245, 239, 227, 0.75); flex-wrap: wrap; } .newsletter-segments label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; } .newsletter-segments input { accent-color: var(--cream); } /* ------------------------------------------------------------- 14. FOOTER ------------------------------------------------------------- */ .site-footer { background: var(--ink); color: rgba(245, 239, 227, 0.7); padding-block: var(--gap-6) var(--gap-3); font-size: var(--fs-sm); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap-4); margin-bottom: var(--gap-5); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand { display: flex; flex-direction: column; gap: var(--gap-2); max-width: 32ch; } .footer-brand .brand { color: var(--cream); margin-bottom: 0.5rem; } .footer-brand .brand-mark { background: var(--cream); color: var(--ink); } .footer-brand p { color: rgba(245, 239, 227, 0.6); font-size: var(--fs-sm); line-height: 1.55; } .site-footer h5 { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; color: rgba(245, 239, 227, 0.5); margin-bottom: 1rem; } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: 0.55rem; } .site-footer a { color: rgba(245, 239, 227, 0.78); transition: color 0.2s ease; } .site-footer a:hover { color: var(--cream); } .footer-bottom { border-top: 1px solid rgba(245, 239, 227, 0.12); padding-top: var(--gap-3); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(245, 239, 227, 0.5); } .footer-bottom .legal { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-disclaimer { font-style: italic; color: rgba(245, 239, 227, 0.45); font-size: var(--fs-xs); max-width: 70ch; margin-top: var(--gap-3); padding-top: var(--gap-3); border-top: 1px solid rgba(245, 239, 227, 0.08); line-height: 1.6; font-family: var(--font-sans); letter-spacing: 0; } /* ------------------------------------------------------------- 15. PAGE HEADERS (subpages) ------------------------------------------------------------- */ .page-header { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); background: var(--cream-soft); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .page-header::before { content: ""; position: absolute; top: -20%; right: -10%; width: 50vw; height: 70vh; background: radial-gradient(circle, var(--accent-tint), transparent 60%); pointer-events: none; } .page-header > * { position: relative; } .breadcrumb { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; margin-bottom: var(--gap-3); flex-wrap: wrap; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span { color: var(--muted-soft); } .page-header h1 { font-size: var(--fs-display-sm); line-height: 1; letter-spacing: -0.025em; margin-bottom: var(--gap-3); max-width: 18ch; } .page-header h1 em { font-style: italic; color: var(--accent); } .page-header .lead { max-width: 60ch; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lg); color: var(--ink-soft); font-weight: 400; line-height: 1.45; } /* ------------------------------------------------------------- 16. DUAL CONTENT (aziende/professionisti switcher within page) ------------------------------------------------------------- */ .dual-tabs { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 4px; margin-bottom: var(--gap-4); position: relative; } .dual-tabs button { padding: 0.65rem 1.4rem; border-radius: 100px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; color: var(--muted); position: relative; z-index: 2; transition: color 0.3s ease; } .dual-tabs button[aria-pressed="true"] { color: var(--paper); } .dual-tabs::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 100px; background: var(--accent); transition: transform 0.4s cubic-bezier(0.5, 1.5, 0.5, 1); z-index: 1; } .dual-tabs[data-active="professionisti"]::before { transform: translateX(100%); } .dual-pane { display: none; } .dual-pane.active { display: block; animation: fadeUp 0.4s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------- 17. ARTICLE-LIKE LONG-FORM CONTENT ------------------------------------------------------------- */ .prose { max-width: 70ch; } .prose h2 { font-size: var(--fs-2xl); margin-top: var(--gap-5); margin-bottom: var(--gap-3); } .prose h3 { font-size: var(--fs-xl); margin-top: var(--gap-4); margin-bottom: var(--gap-2); } .prose p, .prose ul, .prose ol { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.75; margin-bottom: 1em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin-bottom: 0.4em; } .prose blockquote { margin: var(--gap-4) 0; padding: 1.5rem 2rem; border-left: 3px solid var(--accent); background: var(--accent-tint); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lg); color: var(--ink); border-radius: 0 var(--radius) var(--radius) 0; } .prose blockquote p { color: var(--ink); margin: 0; } .prose a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); transition: border-color 0.2s ease; } .prose a:hover { border-color: var(--accent); } .prose strong { color: var(--ink); font-weight: 600; } /* ------------------------------------------------------------- 18. CTA STRIP (in-page) ------------------------------------------------------------- */ .cta-strip { background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: var(--radius-lg); padding: 2rem 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: var(--gap-4); margin: var(--gap-5) 0; flex-wrap: wrap; } .cta-strip h3 { font-size: var(--fs-xl); font-style: italic; color: var(--ink); margin-bottom: 0.4rem; } .cta-strip p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; } /* ------------------------------------------------------------- 19. FORM ELEMENTS ------------------------------------------------------------- */ .field { margin-bottom: 1.25rem; } .field label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 500; margin-bottom: 0.4rem; } .field input, .field textarea, .field select { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; font-size: var(--fs-md); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; } .field textarea { min-height: 130px; resize: vertical; } .checkbox-row { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--fs-sm); color: var(--ink-soft); } .checkbox-row input { margin-top: 4px; accent-color: var(--accent); } /* ------------------------------------------------------------- 20. UTILITIES ------------------------------------------------------------- */ .center { text-align: center; } .muted { color: var(--muted); } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-5 { margin-bottom: 3rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; } .gap-2 { gap: 1rem; } .flex { display: flex; flex-wrap: wrap; } .flex-center { display: flex; align-items: center; justify-content: center; } .between { justify-content: space-between; } .tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag-pill { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); background: var(--paper); } .tag-pill.az { background: var(--aziende-soft); color: var(--aziende); border-color: var(--aziende-soft); } .tag-pill.pr { background: var(--professionisti-soft); color: var(--professionisti); border-color: var(--professionisti-soft); } /* Reveal animation */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 1, 0.4, 1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } /* Marquee ticker */ .ticker { background: var(--ink); color: var(--cream); padding: 0.85rem 0; overflow: hidden; border-block: 1px solid rgba(245, 239, 227, 0.08); } .ticker-track { display: flex; gap: 3rem; white-space: nowrap; animation: marquee 40s linear infinite; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245, 239, 227, 0.7); } .ticker-track > span { display: inline-flex; align-items: center; gap: 0.6rem; } .ticker-track .dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; display: inline-block; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker:hover .ticker-track { animation-play-state: paused; } /* ------------------------------------------------------------- 21. PRICING (freemium) ------------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3); margin-top: var(--gap-4); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } } .price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; position: relative; } .price-card.featured { border-color: var(--ink); border-width: 2px; background: var(--paper); box-shadow: var(--shadow); } .price-card.featured::before { content: "Più scelto"; position: absolute; top: -12px; right: 1.5rem; background: var(--accent); color: var(--cream); padding: 0.3rem 0.8rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; border-radius: 100px; } .price-card .tier { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); } .price-card h3 { font-size: var(--fs-2xl); font-style: italic; margin: 0.4rem 0 var(--gap-3); } .price-card .amount { font-family: var(--font-serif); font-size: 3rem; letter-spacing: -0.03em; font-weight: 400; line-height: 1; margin-bottom: 0.4rem; } .price-card .amount small { font-size: 1rem; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.08em; margin-left: 0.4rem; } .price-card ul { list-style: none; margin: var(--gap-3) 0; } .price-card li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); } .price-card li:last-child { border-bottom: 0; } .price-card li svg { flex-shrink: 0; color: var(--accent); margin-top: 4px; } .price-card .btn { margin-top: auto; justify-content: center; } /* ------------------------------------------------------------- 22. RESPONSIVE — MOBILE NAV ------------------------------------------------------------- */ @media (max-width: 1024px) { .nav-main { position: fixed; inset: var(--header-h) 0 0 0; background: var(--cream); flex-direction: column; align-items: stretch; padding: 2rem clamp(1.25rem, 4vw, 3rem); overflow-y: auto; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.5, 0, 0.2, 1); gap: 0; border-top: 1px solid var(--line); } body.menu-open .nav-main { transform: translateX(0); } .nav-main a, .nav-group > button { padding: 1.2rem 0; font-size: var(--fs-md); border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; justify-content: space-between; } .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 1rem 0; min-width: auto; display: none; } .nav-group[aria-expanded="true"] .nav-dropdown { display: block; } .nav-dropdown a { padding: 0.7rem 0 0.7rem 1.2rem; border-bottom: 0; font-size: var(--fs-sm); } .audience-switch { margin-top: 1.5rem; align-self: center; } .menu-toggle { display: flex; } .nav-main .btn { margin-top: 1rem; align-self: flex-start; } } /* ------------------------------------------------------------- 23. EXTRAS ------------------------------------------------------------- */ .bg-paper { background: var(--paper); } .bg-cream { background: var(--cream); } .bg-soft { background: var(--cream-soft); } .bg-ink { background: var(--ink); color: var(--cream); } .bg-accent { background: var(--accent); color: var(--cream); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); align-items: center; } @media (max-width: 800px) { .split { grid-template-columns: 1fr; } } /* Sector cards */ .sectors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap-2); margin-top: var(--gap-4); } .sector-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; } .sector-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .sector-card .icon { width: 36px; height: 36px; background: var(--cream); border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.4rem; } .sector-card h4 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; } .sector-card small { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } /* Bandi list */ .bandi-list { margin-top: var(--gap-4); display: flex; flex-direction: column; gap: 1rem; } .bando { display: grid; grid-template-columns: 100px 1fr auto; gap: 1.5rem; padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); align-items: center; transition: all 0.3s ease; } .bando:hover { border-color: var(--ink); } .bando .deadline { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-md); text-align: center; padding: 0.7rem; background: var(--accent-tint); border-radius: var(--radius-sm); color: var(--accent-dark); line-height: 1.1; } .bando .deadline strong { display: block; font-size: var(--fs-2xl); font-weight: 400; color: var(--ink); } .bando h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-md); margin-bottom: 0.3rem; } .bando p { font-size: var(--fs-sm); color: var(--muted); margin: 0; } .bando .amount { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--accent-dark); white-space: nowrap; } @media (max-width: 700px) { .bando { grid-template-columns: 1fr; } .bando .amount { text-align: left; } } /* Episode cards */ .episodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-3); margin-top: var(--gap-4); } .episode { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s ease; } .episode:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .episode-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--ink) 0%, #3A2820 100%); position: relative; display: grid; place-items: center; } .episode-thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(181, 72, 47, 0.3), transparent 60%); } .episode-thumb .play { width: 50px; height: 50px; border-radius: 50%; background: rgba(245, 239, 227, 0.9); display: grid; place-items: center; position: relative; z-index: 2; } .episode-thumb .play::after { content: ""; width: 0; height: 0; border-left: 10px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; } .episode-thumb .duration { position: absolute; top: 0.7rem; right: 0.7rem; background: rgba(26, 22, 18, 0.8); color: var(--cream); font-family: var(--font-mono); font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 4px; letter-spacing: 0.05em; z-index: 2; } .episode-body { padding: 1.25rem; } .episode-body .ep-num { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); font-weight: 600; } .episode-body h4 { font-size: var(--fs-md); margin: 0.4rem 0; line-height: 1.3; } .episode-body p { font-size: var(--fs-sm); color: var(--muted); margin: 0; } /* Login form */ .login-card { max-width: 460px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow); } .login-card h2 { font-size: var(--fs-2xl); margin-bottom: 0.4rem; } .login-card .lead { font-size: var(--fs-sm); margin-bottom: var(--gap-3); } .login-card .btn { width: 100%; justify-content: center; margin-top: 0.5rem; } /* Studio Info */ .studio-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); margin-top: var(--gap-4); } @media (max-width: 800px) { .studio-info { grid-template-columns: 1fr; } } .info-block h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); font-weight: 500; margin-bottom: 0.7rem; } .info-block p, .info-block address { font-family: var(--font-serif); font-size: var(--fs-lg); font-style: normal; line-height: 1.5; color: var(--ink); } .info-block a { color: var(--accent); } .info-block a:hover { text-decoration: underline; } .map-frame { aspect-ratio: 4/3; background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: relative; display: grid; place-items: center; } .map-frame svg { width: 90%; height: 90%; } /* Disclaimer banner */ .disclaimer { margin-top: var(--gap-4); padding: 1rem 1.25rem; background: var(--cream); border-left: 3px solid var(--muted); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; font-style: italic; } /* Print styles */ @media print { .site-header, .site-footer, .newsletter, .audience-switch, .menu-toggle { display: none; } body { background: white; color: black; } a { color: black; text-decoration: underline; } }