/* ========================================================================== CSS Custom Properties - Gianni Licitra Films ========================================================================== */:root{/* ------------------------------------------------------------------------- Colors ------------------------------------------------------------------------- */ /* Primary - Gold accent */ --color-gold:#C4964A;--color-gold-hover:#B8860B;--color-gold-dark:#A67D3D;/* Neutrals */ --color-white:#FFFFFF;--color-black:#000000;--color-dark:#1A1A1A;--color-dark-bg:#0D0D0D;--color-gray-900:#1A1A1A;--color-gray-800:#2D2D2D;--color-gray-700:#404040;--color-gray-600:#666666;--color-gray-500:#888888;--color-gray-400:#AAAAAA;--color-gray-300:#CCCCCC;--color-gray-200:#E5E5E5;--color-gray-100:#F5F5F5;--color-gray-50:#FAFAFA;/* Semantic */ --color-text-primary:var(--color-gray-900);--color-text-secondary:var(--color-gray-600);--color-text-light:var(--color-white);--color-text-muted:var(--color-gray-500);/* ------------------------------------------------------------------------- Typography ------------------------------------------------------------------------- */ /* Font Families */ --font-heading:'Playfair Display',Georgia,'Times New Roman',serif;--font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-accent:var(--font-heading);/* Font Sizes - Fluid Typography */ --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);--text-sm:clamp(0.875rem,0.8rem + 0.375vw,1rem);--text-base:1.125rem;/* 18px */ --text-lg:clamp(1.125rem,1rem + 0.625vw,1.25rem);--text-xl:clamp(1.25rem,1.1rem + 0.75vw,1.5rem);--text-2xl:clamp(1.5rem,1.25rem + 1.25vw,2rem);--text-3xl:clamp(1.875rem,1.5rem + 1.875vw,2.5rem);--text-4xl:clamp(2.25rem,1.75rem + 2.5vw,3.5rem);--text-5xl:clamp(3rem,2rem + 5vw,5rem);--text-hero:clamp(2.5rem,1.5rem + 5vw,4.5rem);/* Font Weights */ --font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;/* Line Heights */ --leading-none:1;--leading-tight:1.2;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;/* Letter Spacing */ --tracking-tighter:-0.05em;--tracking-tight:-0.025em;--tracking-normal:0;--tracking-wide:0.025em;--tracking-wider:0.05em;--tracking-widest:0.15em;/* ------------------------------------------------------------------------- Spacing ------------------------------------------------------------------------- */ --space-1:0.25rem;/* 4px */ --space-2:0.5rem;/* 8px */ --space-3:0.75rem;/* 12px */ --space-4:1rem;/* 16px */ --space-5:1.25rem;/* 20px */ --space-6:1.5rem;/* 24px */ --space-8:2rem;/* 32px */ --space-10:2.5rem;/* 40px */ --space-12:3rem;/* 48px */ --space-16:4rem;/* 64px */ --space-20:5rem;/* 80px */ --space-24:6rem;/* 96px */ --space-32:8rem;/* 128px */ /* Section Spacing - Fluid */ --section-padding-y:clamp(40px,6vw,80px);--section-padding-y-sm:clamp(40px,6vw,80px);/* Container */ --container-max:1400px;--container-padding:clamp(20px,5vw,80px);--container-narrow:900px;/* ------------------------------------------------------------------------- Layout ------------------------------------------------------------------------- */ --header-height:80px;--header-height-mobile:70px;/* ------------------------------------------------------------------------- Borders & Radius ------------------------------------------------------------------------- */ --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--border-width:1px;--border-color:var(--color-gray-200);--border-color-dark:var(--color-gray-700);/* ------------------------------------------------------------------------- Shadows ------------------------------------------------------------------------- */ --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-card:0 4px 20px rgb(0 0 0 / 0.08);/* ------------------------------------------------------------------------- Transitions ------------------------------------------------------------------------- */ --transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:350ms ease;--transition-slower:500ms ease;/* Specific transitions */ --transition-color:color var(--transition-fast);--transition-bg:background-color var(--transition-fast);--transition-transform:transform var(--transition-base);--transition-opacity:opacity var(--transition-base);--transition-all:all var(--transition-base);/* ------------------------------------------------------------------------- Z-Index Scale ------------------------------------------------------------------------- */ --z-below:-1;--z-base:0;--z-above:1;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-overlay:400;--z-modal:500;--z-popover:600;--z-tooltip:700;}/* ------------------------------------------------------------------------- Dark Mode (for dark sections) ------------------------------------------------------------------------- */ [data-theme="dark"]{--color-text-primary:var(--color-white);--color-text-secondary:var(--color-gray-300);--border-color:var(--color-gray-700);}/* ========================================================================== Header Component ========================================================================== */ .header{position:fixed;top:0;left:0;right:0;z-index:9999;padding:var(--space-6) 0;transition:background-color var(--transition-base),padding var(--transition-base);}.header--scrolled{background-color:rgba(255,255,255,0.98);padding:var(--space-4) 0;backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,0.05);}/* Invert colors when scrolled (white background) */ .header--scrolled .header__logo-img{filter:brightness(0);}.header--scrolled .header__logo-name,.header--scrolled .header__logo-tagline{color:var(--color-dark);}.header--scrolled .menu-toggle__line{background-color:var(--color-dark);}.header--scrolled .header__lang-switcher a{color:rgba(0,0,0,0.5);}.header--scrolled .header__lang-switcher a:hover{color:var(--color-dark);}.header--scrolled .header__lang-switcher a.active{color:var(--color-gold-dark);}.header--scrolled .header__lang-switcher a:not(:last-child)::after{background-color:rgba(0,0,0,0.15);}.header--scrolled .lang-dropdown__trigger{color:var(--color-dark);border-color:rgba(0,0,0,0.3);}.header__container{display:flex;align-items:center;justify-content:space-between;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);}/* Logo */ .header__logo{display:flex;flex-direction:column;align-items:flex-start;color:var(--color-white);text-decoration:none;transition:opacity var(--transition-fast);}.header__logo:hover{opacity:0.8;color:var(--color-white);}.header__logo-name{font-family:var(--font-heading);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-weight:var(--font-normal);letter-spacing:var(--tracking-wider);text-transform:uppercase;line-height:1.2;}.header__logo-tagline{font-family:var(--font-heading);font-size:clamp(0.75rem,0.6rem + 0.5vw,1rem);font-weight:var(--font-normal);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-gold);}.header__logo-img{width:200px;height:auto;object-fit:contain;}/* Header Actions Container */ .header__actions{display:flex;align-items:center;gap:0;}/* Menu Toggle Button */ .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;padding:var(--space-2);background:transparent;border:none;cursor:pointer;z-index:9999;position:relative;}.menu-toggle__line{display:block;width:30px;height:2px;background-color:var(--color-white);transition:transform var(--transition-base),opacity var(--transition-fast);}.menu-toggle__line:nth-child(1){margin-bottom:8px;}.menu-toggle__line:nth-child(2){margin-bottom:8px;}/* Menu Toggle Active State */ .menu-toggle--active .menu-toggle__line:nth-child(1){transform:translateY(10px) rotate(45deg);}.menu-toggle--active .menu-toggle__line:nth-child(2){opacity:0;}.menu-toggle--active .menu-toggle__line:nth-child(3){transform:translateY(-10px) rotate(-45deg);}/* Menu toggle lines dark when menu is open (white background overlay) */ .menu-toggle--active .menu-toggle__line{background-color:var(--color-dark);}/* Mobile Navigation Overlay */ .nav-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;height:100dvh;background-color:#ffffff;background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);z-index:9998;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.35s ease,visibility 0.35s ease;}.nav-overlay--open{opacity:1;visibility:visible;}.nav-overlay__content{text-align:center;transform:translateY(20px);opacity:0;transition:transform 0.35s ease,opacity 0.35s ease;transition-delay:0.1s;padding:2rem;width:100%;max-width:400px;}.nav-overlay--open .nav-overlay__content{transform:translateY(0);opacity:1;}/* Navigation Menu */ .nav-menu{display:flex;flex-direction:column;gap:2rem;list-style:none;margin:0;padding:0;}.nav-menu__item{opacity:0;transform:translateY(20px);transition:opacity 0.25s ease,transform 0.25s ease;}.nav-overlay--open .nav-menu__item{opacity:1;transform:translateY(0);}.nav-overlay--open .nav-menu__item:nth-child(1){transition-delay:0.15s;}.nav-overlay--open .nav-menu__item:nth-child(2){transition-delay:0.2s;}.nav-overlay--open .nav-menu__item:nth-child(3){transition-delay:0.25s;}.nav-overlay--open .nav-menu__item:nth-child(4){transition-delay:0.3s;}.nav-menu__link{font-family:var(--font-heading),Georgia,serif;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:400;color:var(--color-dark);text-decoration:none;transition:color 0.15s ease;display:inline-block;position:relative;padding:0.5rem 0;}.nav-menu__link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background-color:#1A1A1A;transition:width 0.25s ease;}.nav-menu__link:hover,.nav-menu__link:focus{color:#1A1A1A;}.nav-menu__link:hover::after,.nav-menu__link:focus::after{width:100%;}/* Navigation Social Links */ .nav-social{display:flex;gap:1.5rem;justify-content:center;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,0.08);opacity:0;transition:opacity 0.25s ease;transition-delay:0.4s;}.nav-overlay--open .nav-social{opacity:1;}.nav-social__link{color:var(--color-dark);transition:color 0.15s ease,transform 0.15s ease;display:flex;align-items:center;justify-content:center;width:44px;height:44px;}.nav-social__link:hover{color:var(--color-gold);transform:scale(1.1);}.nav-social__link svg{width:28px;height:28px;}/* Body scroll lock when menu is open */ body.menu-open{overflow:hidden;}/* ========================================================================== Language Switcher - Luxury Modern Design ========================================================================== */ .header__lang-switcher{display:flex;align-items:center;gap:0;margin-right:var(--space-4);position:relative;}.header__lang-switcher a{font-family:var(--font-body);font-size:0.75rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.6);text-decoration:none;padding:0.5rem 0.625rem;position:relative;transition:color 0.3s ease;}.header__lang-switcher a:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background-color:rgba(255,255,255,0.2);}.header__lang-switcher a:hover{color:var(--color-white);}.header__lang-switcher a.active{color:var(--color-gold);}/* Language Switcher in Navigation Overlay (Mobile) */ .nav-lang-switcher{display:flex;justify-content:center;align-items:center;gap:0;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,0.08);opacity:0;transition:opacity 0.25s ease;transition-delay:0.45s;}.nav-overlay--open .nav-lang-switcher{opacity:1;}.nav-lang-switcher a{font-family:var(--font-body);font-size:0.8125rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(0,0,0,0.4);text-decoration:none;padding:0.875rem 1.125rem;position:relative;transition:color 0.3s ease,background-color 0.3s ease;border-radius:4px;}.nav-lang-switcher a:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background-color:rgba(0,0,0,0.1);}.nav-lang-switcher a:hover{color:var(--color-dark);}.nav-lang-switcher a.active{color:var(--color-gold-dark);background-color:rgba(196,150,74,0.1);}/* Globe icon before language switcher on mobile */ .nav-lang-switcher::before{content:'';display:block;width:18px;height:18px;margin-right:0.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A67D3D' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:0.8;}/* ========================================================================== Mobile Language Dropdown - Luxury Design ========================================================================== */ .lang-dropdown{position:relative;display:none;margin-right:var(--space-3);}.lang-dropdown__trigger{display:flex;align-items:center;gap:0.375rem;padding:0.5rem 0.625rem;background:transparent;border:1px solid rgba(255,255,255,0.4);border-radius:4px;color:var(--color-white);font-family:var(--font-body);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;cursor:pointer;transition:all 0.3s ease;}.lang-dropdown__trigger:hover{border-color:var(--color-white);background-color:rgba(255,255,255,0.1);}.lang-dropdown__arrow{transition:transform 0.3s ease;}.lang-dropdown--open .lang-dropdown__arrow{transform:rotate(180deg);}.lang-dropdown__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:140px;background-color:rgba(26,26,26,0.98);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:0.5rem;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.25s ease;z-index:10000;box-shadow:0 10px 40px rgba(0,0,0,0.4);}.lang-dropdown--open .lang-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0);}.lang-dropdown__item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;color:rgba(255,255,255,0.7);text-decoration:none;border-radius:6px;transition:all 0.2s ease;}.lang-dropdown__item:hover{background-color:rgba(255,255,255,0.08);color:var(--color-white);}.lang-dropdown__item--active{color:var(--color-white);background-color:rgba(255,255,255,0.15);}.lang-dropdown__code{font-family:var(--font-body);font-size:0.75rem;font-weight:600;letter-spacing:0.1em;min-width:24px;}.lang-dropdown__name{font-family:var(--font-body);font-size:0.8125rem;font-weight:400;}/* Mobile Improvements */ @media (max-width:768px){.header__logo-img{width:160px;}/* Hide desktop language switcher,show dropdown on mobile */ .header__lang-switcher{display:none;}.lang-dropdown{display:block;}.nav-menu{gap:1.5rem;}.nav-menu__link{font-size:1.75rem;}.nav-social{margin-top:2rem;padding-top:1.5rem;}.nav-social__link svg{width:24px;height:24px;}}@media (max-width:375px){.header__logo-img{width:140px;}.nav-menu__link{font-size:1.5rem;}}/* ========================================================================== Hero Component ========================================================================== */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}/* Background Image */ .hero__background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;}.hero__background img{width:100%;height:100%;object-fit:cover;object-position:center;}/* Dark overlay for better text readability */ .hero__background::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient( to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.4) 100% );}/* Hero Content */ .hero__content{position:relative;z-index:1;text-align:center;padding:var(--space-8);max-width:1000px;}/* Hero Headline */ .hero__headline{font-family:var(--font-heading);font-size:var(--text-hero);font-weight:var(--font-normal);font-style:italic;color:var(--color-white);line-height:var(--leading-tight);margin-bottom:var(--space-8);text-shadow:0 2px 20px rgba(0,0,0,0.3);}/* Scroll indicator */ .hero__scroll{position:absolute;bottom:var(--space-10);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-white);opacity:0.8;transition:opacity var(--transition-fast);cursor:pointer;}.hero__scroll:hover{opacity:1;}.hero__scroll-text{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-widest);}.hero__scroll-icon{width:24px;height:24px;animation:bounce 2s infinite;}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(8px);}60%{transform:translateY(4px);}}/* Video Background */ .hero__video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;}/* Video Overlay */ .hero__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient( to bottom,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.40) 50%,rgba(0,0,0,0.55) 100% );pointer-events:none;}/* ========================================================================== Content Sections ========================================================================== */ /* ------------------------------------------------------------------------- Section Header (Titles) ------------------------------------------------------------------------- */ .section-header{text-align:center;margin-bottom:var(--space-12);}.section-header__title{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--font-normal);line-height:var(--leading-tight);margin-bottom:var(--space-4);text-wrap:balance;}.section-header__subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:700px;margin:0 auto;}/* ------------------------------------------------------------------------- Quote Highlight - Minimal emphasis for key phrases ------------------------------------------------------------------------- */ .quote-highlight{font-family:var(--font-heading);font-size:var(--text-xl);font-style:italic;font-weight:var(--font-normal);color:var(--color-gold);line-height:var(--leading-relaxed);margin-top:var(--space-10);margin-bottom:var(--space-10);}@media (max-width:767px){.quote-highlight{font-size:var(--text-lg);margin-top:var(--space-8);margin-bottom:var(--space-8);}}/* ------------------------------------------------------------------------- Intro Section (Dall'esperienza pubblicitaria) ------------------------------------------------------------------------- */ .intro{background-color:var(--color-white);}.intro__grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:center;}@media (min-width:992px){.intro__grid{grid-template-columns:1fr 1fr;gap:var(--space-16);}}.intro__content{order:2;}@media (min-width:992px){.intro__content{order:1;}}.intro__title{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-normal);line-height:var(--leading-snug);margin-bottom:var(--space-6);}.intro__text{color:var(--color-text-secondary);margin-bottom:var(--space-8);line-height:var(--leading-relaxed);}.intro__text strong{color:var(--color-text-primary);font-weight:var(--font-semibold);}/* Feature List */ .intro__features{margin-bottom:var(--space-10);}.intro__feature{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-gray-200);}.intro__feature:last-child{border-bottom:none;}.intro__feature-icon{flex-shrink:0;color:var(--color-gold);font-size:var(--text-xl);line-height:1;}.intro__feature-text{font-size:var(--text-sm);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-primary);}/* CTA Buttons */ .intro__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}.intro__cta .btn{min-height:52px;}.about__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}.about__cta .btn{min-height:52px;}/* Intro Image */ .intro__image{order:1;position:relative;}@media (min-width:992px){.intro__image{order:2;}}.intro__image-wrapper{position:relative;}.intro__image-wrapper::before{content:'';position:absolute;top:30px;right:-30px;width:100%;height:100%;background-color:var(--color-gray-100);z-index:-1;}@media (max-width:991px){.intro__image-wrapper::before{top:15px;right:-15px;}}.intro__image img{width:100%;max-width:500px;height:auto;display:block;box-shadow:50px 50px 50px #00000033;}/* ------------------------------------------------------------------------- About Section (Chi Sono) ------------------------------------------------------------------------- */ .about{background-color:var(--color-white);}.about__grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:center;}@media (min-width:992px){.about__grid{grid-template-columns:1fr 1fr;gap:var(--space-16);}}.about__image{position:relative;}.about__image-wrapper{position:relative;}.about__image-wrapper::before{content:'';position:absolute;top:30px;left:-30px;width:100%;height:100%;background-color:var(--color-gray-100);z-index:-1;}@media (max-width:991px){.about__image-wrapper::before{top:15px;left:-15px;}}.about__image img{width:100%;max-width:500px;height:auto;display:block;box-shadow:50px 50px 50px #00000033;}.about__content{padding:var(--space-4) 0;}.about__title{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-normal);line-height:var(--leading-snug);margin-bottom:var(--space-6);}.about__text{color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:var(--leading-relaxed);}.about__text strong{color:var(--color-text-primary);font-weight:var(--font-semibold);}.about__highlight{font-weight:var(--font-semibold);color:var(--color-text-primary);font-style:italic;margin:var(--space-6) 0;padding-left:var(--space-6);border-left:3px solid var(--color-gold);}/* ------------------------------------------------------------------------- Value Proposition Section ------------------------------------------------------------------------- */ .value{background-color:var(--color-white);}.value__grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:center;}@media (min-width:992px){.value__grid{grid-template-columns:1fr 1fr;gap:var(--space-16);}}.value__content{order:2;}@media (min-width:992px){.value__content{order:1;}}.value__title{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-normal);line-height:var(--leading-snug);margin-bottom:var(--space-6);}.value__text{color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:var(--leading-relaxed);}.value__text strong{color:var(--color-text-primary);font-weight:var(--font-semibold);}.value__image{order:1;position:relative;}@media (min-width:992px){.value__image{order:2;}}.value__image-wrapper{position:relative;}.value__image-wrapper::before{content:'';position:absolute;top:30px;right:-30px;width:100%;height:100%;background-color:var(--color-gray-100);z-index:-1;}@media (max-width:991px){.value__image-wrapper::before{top:15px;right:-15px;}}.value__image img{width:100%;height:auto;display:block;}/* ------------------------------------------------------------------------- Process Section (Come nascono i miei video) ------------------------------------------------------------------------- */ .process{background-color:var(--color-white);}.process__grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:start;}@media (min-width:992px){.process__grid{grid-template-columns:1fr 1fr;gap:var(--space-16);}}.process__image{position:relative;}.process__image-wrapper{position:relative;position:sticky;top:calc(var(--header-height) + var(--space-8));}.process__image-wrapper::before{content:'';position:absolute;top:30px;left:-30px;width:100%;height:100%;background-color:var(--color-gray-100);z-index:-1;}@media (max-width:991px){.process__image-wrapper{position:relative;top:0;}.process__image-wrapper::before{top:15px;left:-15px;}}.process__image img{width:100%;max-width:500px;height:auto;display:block;box-shadow:50px 50px 50px #00000033;}.process__content{padding:var(--space-4) 0;}/* Process Steps */ .process__steps{display:flex;flex-direction:column;gap:var(--space-10);}.process__step{display:flex;gap:var(--space-6);}.process__step-number{flex-shrink:0;font-family:var(--font-heading);font-size:var(--text-5xl);font-weight:var(--font-light);color:var(--color-gold);line-height:0.8;opacity:0.5;}.process__step-content{flex:1;}.process__step-title{font-size:var(--text-sm);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-gold);margin-bottom:var(--space-3);}.process__step-text{color:var(--color-text-secondary);line-height:var(--leading-relaxed);}.process__step-text strong{color:var(--color-text-primary);font-weight:var(--font-semibold);}/* ------------------------------------------------------------------------- CTA Banner Section ------------------------------------------------------------------------- */ .cta-banner{background-color:var(--color-white);text-align:center;padding:var(--space-16) 0;}.cta-banner__title{font-family:var(--font-body);font-size:var(--text-lg);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider);margin-bottom:var(--space-6);}/* ------------------------------------------------------------------------- Full Width Image Section ------------------------------------------------------------------------- */ .full-section-image{width:100%;height:60vh;min-height:400px;max-height:700px;overflow:hidden;}.full-section-image img{width:100%;height:100%;object-fit:cover;object-position:center;}/* Section Divider (contained) */ .section--divider{padding-top:var(--space-12);padding-bottom:calc(var(--space-16) + 50px);overflow:visible;display:block;}.section-divider-img{width:100%;height:auto;display:block;box-shadow:50px 50px 50px #00000033;}@media (max-width:767px){.section--divider{padding-top:var(--space-8);padding-bottom:calc(var(--space-12) + 30px);}.section-divider-img{box-shadow:30px 30px 30px #00000033;}}/* ------------------------------------------------------------------------- Contact CTA Section (Vuoi un video...) ------------------------------------------------------------------------- */ .contact-cta{position:relative;min-height:80vh;display:flex;align-items:center;overflow:hidden;}.contact-cta__background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;}.contact-cta__background img{width:100%;height:100%;object-fit:cover;object-position:center;}.contact-cta__background::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient( to right,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0.45) 100% );}.contact-cta__container{display:grid;/* minmax(0,1fr) e NON 1fr:`1fr` equivale a minmax(auto,1fr),e quel minimo `auto` vale "larghezza minima del contenuto". Su mobile la colonna restava a 474px dentro un contenitore da 390,spingendo il form fuori schermo (la sezione ha overflow-x:hidden,quindi si vedeva solo tagliato). Con minimo 0 la colonna segue il contenitore e il contenuto manda a capo. */ grid-template-columns:minmax(0,1fr);gap:var(--space-12);align-items:center;width:100%;}@media (min-width:992px){.contact-cta__container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-16);}}.contact-cta__content{color:var(--color-white);padding:var(--space-8) 0;}.contact-cta__title{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--font-normal);font-style:italic;line-height:var(--leading-tight);margin-bottom:var(--space-2);color:#ffffff;}.contact-cta__subtitle{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-normal);margin-bottom:var(--space-6);}.contact-cta__text{font-style:italic;opacity:0.9;margin-bottom:var(--space-8);line-height:var(--leading-relaxed);}.contact-cta__info-title{font-weight:var(--font-semibold);margin-bottom:var(--space-2);}.contact-cta__info-text{opacity:0.9;margin-bottom:var(--space-6);}.contact-cta__direct{margin-top:var(--space-8);}.contact-cta__direct-title{font-weight:var(--font-semibold);margin-bottom:var(--space-2);}.contact-cta__phone{font-size:var(--text-lg);font-weight:var(--font-semibold);margin-bottom:var(--space-4);}.contact-cta__phone a{color:var(--color-white);}.contact-cta__phone a:hover{color:var(--color-gold);}/* WhatsApp Button */ .btn--whatsapp{background-color:transparent;border:2px solid var(--color-white);color:var(--color-white);border-radius:var(--radius-full);}.btn--whatsapp:hover{background-color:var(--color-white);color:var(--color-black);}.btn--whatsapp svg{width:20px;height:20px;}/* ========================================================================== Gallery / Slider Component ========================================================================== */ .gallery{background-color:var(--color-white);overflow:hidden;}.gallery__header{text-align:center;margin-bottom:var(--space-12);}.gallery__title{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--font-normal);line-height:var(--leading-tight);margin-bottom:var(--space-4);}.gallery__subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);}/* Slider Container */ .gallery__slider{position:relative;max-width:1200px;margin:0 auto;}.gallery__slider-wrapper{display:flex;gap:var(--space-6);overflow:hidden;}.gallery__slide{flex:0 0 calc(50% - var(--space-3));min-width:calc(50% - var(--space-3));transition:transform var(--transition-slow);}@media (max-width:768px){.gallery__slide{flex:0 0 100%;min-width:100%;}}.gallery__slide img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}/* Slider Navigation */ .gallery__nav{display:flex;justify-content:center;align-items:center;gap:var(--space-6);margin-top:var(--space-10);}.gallery__nav-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;color:var(--color-gold);cursor:pointer;transition:transform var(--transition-fast),color var(--transition-fast);}.gallery__nav-btn:hover{transform:scale(1.1);}.gallery__nav-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;}.gallery__nav-btn svg{width:32px;height:32px;}/* Slider Dots */ .gallery__dots{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-6);}.gallery__dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-gray-300);border:none;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast);}.gallery__dot:hover{background-color:var(--color-gray-400);}.gallery__dot--active{background-color:var(--color-gold);transform:scale(1.2);}/* Video Thumbnail Variant */ .gallery__slide--video{position:relative;cursor:pointer;}.gallery__slide--video::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background-color:rgba(255,255,255,0.9);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C4964A'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:40px;transition:transform var(--transition-base),background-color var(--transition-base);}.gallery__slide--video:hover::after{transform:translate(-50%,-50%) scale(1.1);background-color:var(--color-white);}/* Portfolio Grid (alternative layout) */ .portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}@media (min-width:768px){.portfolio-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-6);}}@media (min-width:1200px){.portfolio-grid{grid-template-columns:repeat(4,1fr);}}.portfolio-grid__item{position:relative;overflow:hidden;aspect-ratio:1;}.portfolio-grid__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);}.portfolio-grid__item:hover img{transform:scale(1.05);}.portfolio-grid__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 50%);display:flex;align-items:flex-end;padding:var(--space-4);opacity:0;transition:opacity var(--transition-base);}.portfolio-grid__item:hover .portfolio-grid__overlay{opacity:1;}.portfolio-grid__title{color:var(--color-white);font-size:var(--text-sm);font-weight:var(--font-medium);}/* ========================================================================== Video Grid ========================================================================== */ .gallery__grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);max-width:1200px;margin:0 auto;}@media (min-width:768px){.gallery__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-6);}}.gallery__video-card{display:block;text-decoration:none;color:inherit;}.gallery__video-thumbnail{position:relative;overflow:hidden;aspect-ratio:16/9;background-color:var(--color-black);}.gallery__video-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow),filter var(--transition-base);}.gallery__video-card:hover .gallery__video-thumbnail img{transform:scale(1.05);filter:brightness(0.8);}.gallery__video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);opacity:1;transition:background var(--transition-base);}.gallery__video-card:hover .gallery__video-overlay{background:rgba(0,0,0,0.5);}.gallery__play-btn{width:70px;height:70px;background-color:rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-base),background-color var(--transition-base);}.gallery__video-card:hover .gallery__play-btn{transform:scale(1.1);background-color:var(--color-white);}.gallery__play-btn svg{width:28px;height:28px;color:var(--color-gold);margin-left:4px;}.gallery__video-title{margin-top:var(--space-4);font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-normal);font-style:italic;text-align:center;color:var(--color-text-primary);}/* ========================================================================== Video Lightbox ========================================================================== */ .video-lightbox{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--space-4);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;}.video-lightbox--open{opacity:1;visibility:visible;}.video-lightbox__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.95);}.video-lightbox__content{position:relative;width:100%;max-width:1100px;transform:scale(0.9);transition:transform 0.3s ease;}.video-lightbox--open .video-lightbox__content{transform:scale(1);}.video-lightbox__close{position:absolute;top:-50px;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-white);cursor:pointer;transition:color 0.2s ease,transform 0.2s ease;z-index:10;}.video-lightbox__close:hover{color:var(--color-gold);transform:scale(1.1);}.video-lightbox__close svg{width:32px;height:32px;}.video-lightbox__wrapper{position:relative;width:100%;padding-bottom:56.25%;/* 16:9 aspect ratio */ background-color:var(--color-black);}.video-lightbox__wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;}/* ========================================================================== Testimonials Component - Elegant Design ========================================================================== */ .testimonials{background-color:#fafafa;overflow:hidden;position:relative;}.testimonials__header{text-align:center;margin-bottom:3rem;}.testimonials__title{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--font-normal);font-style:italic;line-height:var(--leading-tight);margin-bottom:1rem;color:var(--color-text-primary);}.testimonials__subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:600px;margin:0 auto;line-height:1.6;}/* Testimonials Slider - Manual Navigation */ .testimonials__slider{position:relative;width:100%;overflow:hidden;padding:2rem 0;}.testimonials__wrapper{display:flex;gap:2rem;width:max-content;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);user-select:none;}/* Navigation Arrows */ .testimonials__nav{display:flex;justify-content:center;gap:1rem;margin-top:2rem;}.testimonials__nav-btn{width:50px;height:50px;border:1px solid rgba(196,150,74,0.4);background:transparent;color:#1A1A1A;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}.testimonials__nav-btn:hover{background:#1A1A1A;color:#ffffff;border-color:#1A1A1A;}.testimonials__nav-btn svg{width:20px;height:20px;}/* Testimonial Card - Elegant Style */ .testimonial-card{flex:0 0 400px;min-width:400px;max-width:400px;background:#ffffff;border:1px solid rgba(196,150,74,0.2);padding:2.5rem;display:flex;flex-direction:column;position:relative;transition:border-color 0.3s ease,box-shadow 0.3s ease;}.testimonial-card:hover{border-color:rgba(196,150,74,0.5);box-shadow:0 10px 40px rgba(0,0,0,0.08);}/* Elegant quote icon */ .testimonial-card::before{content:'"';position:absolute;top:1.5rem;left:2rem;font-family:'Playfair Display',Georgia,serif;font-size:4rem;font-style:italic;color:var(--color-gold);opacity:0.5;line-height:1;pointer-events:none;}.testimonial-card__quote{flex:1;font-size:0.95rem;line-height:1.8;color:#555555;margin-bottom:1.5rem;padding-top:2rem;font-style:italic;}.testimonial-card__author{font-family:var(--font-heading);font-weight:500;font-size:1rem;color:#1a1a1a;padding-top:1rem;border-top:1px solid rgba(196,150,74,0.3);}/* Read More Button */ .testimonial-card__read-more{background:transparent;border:none;color:#1A1A1A;font-size:0.8rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;cursor:pointer;padding:0;margin-bottom:1rem;align-self:flex-start;transition:color 0.2s ease;}.testimonial-card__read-more:hover{color:var(--color-gold);}/* Responsive */ @media (max-width:768px){.testimonials__header{margin-bottom:2rem;padding:0 1rem;}.testimonials__title{font-size:clamp(1.5rem,5vw,2rem);}.testimonial-card{flex:0 0 320px;min-width:320px;max-width:320px;padding:2rem;}.testimonial-card::before{font-size:3rem;top:1rem;left:1.5rem;}.testimonial-card__quote{font-size:0.9rem;padding-top:1.5rem;}.testimonials__nav-btn{width:44px;height:44px;}.testimonials__nav-btn svg{width:18px;height:18px;}}@media (max-width:480px){.testimonial-card{flex:0 0 280px;min-width:280px;max-width:280px;padding:1.5rem;}.testimonials__wrapper{gap:1rem;}}/* ========================================================================== Testimonial Modal - Elegant Style ========================================================================== */ .testimonial-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;}.testimonial-modal--open{opacity:1;visibility:visible;}.testimonial-modal__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.85);backdrop-filter:blur(4px);}.testimonial-modal__content{position:relative;background-color:#ffffff;color:#1a1a1a;padding:3rem;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;transform:translateY(20px);transition:transform 0.3s ease;}.testimonial-modal--open .testimonial-modal__content{transform:translateY(0);}.testimonial-modal__close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#666666;cursor:pointer;transition:color 0.2s ease;}.testimonial-modal__close:hover{color:#1A1A1A;}.testimonial-modal__close svg{width:24px;height:24px;}.testimonial-modal__quote{font-size:1.1rem;line-height:1.8;color:#555555;margin-bottom:2rem;font-style:italic;position:relative;padding-left:2rem;}.testimonial-modal__quote::before{content:'"';position:absolute;top:-0.5rem;left:0;font-family:'Playfair Display',Georgia,serif;font-size:3rem;color:#1A1A1A;opacity:0.5;line-height:1;}.testimonial-modal__author{font-family:var(--font-heading);font-weight:500;font-size:1.1rem;color:#1A1A1A;}/* Modal Mobile Optimization */ @media (max-width:768px){.testimonial-modal{padding:1rem;align-items:flex-end;}.testimonial-modal__content{padding:2rem 1.5rem;max-height:85vh;border-radius:12px 12px 0 0;}.testimonial-modal__close{top:0.75rem;right:0.75rem;width:40px;height:40px;}.testimonial-modal__close svg{width:20px;height:20px;}.testimonial-modal__quote{font-size:1rem;line-height:1.7;padding-left:1.5rem;margin-bottom:1.5rem;}.testimonial-modal__quote::before{font-size:2.5rem;top:-0.25rem;}.testimonial-modal__author{font-size:1rem;}}@media (max-width:480px){.testimonial-modal__content{padding:1.5rem 1rem;max-height:90vh;}.testimonial-modal__quote{font-size:0.95rem;padding-left:1.25rem;}}/* ========================================================================== FAQ Accordion Component ========================================================================== */ .faq{background-color:var(--color-white);}.faq__header{text-align:center;margin-bottom:var(--space-12);}.faq__title{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--font-normal);line-height:var(--leading-tight);}/* FAQ List */ .faq__list{max-width:900px;margin:0 auto;}/* FAQ Item */ .faq__item{border-bottom:1px solid var(--color-gray-200);}.faq__item:first-child{border-top:1px solid var(--color-gray-200);}/* FAQ Question (Trigger) */ .faq__question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-6) 0;background:transparent;border:none;cursor:pointer;text-align:left;transition:color var(--transition-fast);}.faq__question:hover{color:var(--color-gold);}.faq__question-text{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-normal);color:var(--color-dark);padding-right:var(--space-4);}.faq__question-icon{flex-shrink:0;width:24px;height:24px;position:relative;transition:transform var(--transition-base);}/* Plus/Minus Icon */ .faq__question-icon::before,.faq__question-icon::after{content:'';position:absolute;top:50%;left:50%;background-color:var(--color-gold);transition:transform var(--transition-base);}.faq__question-icon::before{width:16px;height:2px;transform:translate(-50%,-50%);}.faq__question-icon::after{width:2px;height:16px;transform:translate(-50%,-50%);}/* Active state - rotate to X or minus */ .faq__item--active .faq__question-icon::after{transform:translate(-50%,-50%) rotate(90deg);}/* FAQ Answer */ .faq__answer{max-height:0;overflow:hidden;transition:max-height var(--transition-slow),padding var(--transition-slow);}.faq__item--active .faq__answer{max-height:500px;/* Adjust as needed */}.faq__answer-content{padding-bottom:var(--space-6);color:var(--color-text-secondary);line-height:var(--leading-relaxed);}.faq__answer-content p{margin-bottom:var(--space-4);}.faq__answer-content p:last-child{margin-bottom:0;}.faq__answer-content ul{margin:var(--space-4) 0;padding-left:var(--space-6);}.faq__answer-content li{margin-bottom:var(--space-2);position:relative;}.faq__answer-content li::before{content:'•';position:absolute;left:calc(var(--space-6) * -1);color:var(--color-gold);}/* Accessibility - focus states */ .faq__question:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px;}/* Animation for answer content */ .faq__answer-content{opacity:0;transform:translateY(-10px);transition:opacity var(--transition-base),transform var(--transition-base);}.faq__item--active .faq__answer-content{opacity:1;transform:translateY(0);}/* Alternative:Simple expandable style */ .faq--simple .faq__question-text{color:var(--color-text-primary);font-family:var(--font-body);font-weight:var(--font-medium);}.faq--simple .faq__question:hover .faq__question-text{color:var(--color-gold);}/* ========================================================================== Form Component ========================================================================== */ /* Form Container */ .contact-form{background-color:var(--color-white);padding:var(--space-10);max-width:500px;}@media (max-width:640px){.contact-form{padding:var(--space-6);}}.contact-form__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-normal);color:var(--color-gold);margin-bottom:var(--space-8);text-align:center;}/* Form Group */ .form-group{margin-bottom:var(--space-6);}.form-group:last-of-type{margin-bottom:var(--space-8);}/* Labels */ .form-label{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);margin-bottom:var(--space-2);}.form-label--required::after{content:' *';color:var(--color-gold);}/* Input Fields */ .form-input,.form-select,.form-textarea{width:100%;padding:var(--space-4);font-size:var(--text-base);color:var(--color-text-primary);background-color:var(--color-white);border:1px solid var(--color-gray-300);border-radius:0;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);appearance:none;}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 3px rgba(196,150,74,0.1);}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-gray-400);}/* Select Dropdown */ .form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-4) center;background-size:16px;padding-right:var(--space-12);cursor:pointer;}/* Textarea */ .form-textarea{min-height:120px;resize:vertical;}/* Checkbox & Radio */ .form-check{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;}.form-check input[type="checkbox"],.form-check input[type="radio"]{flex-shrink:0;width:20px;height:20px;margin-top:2px;cursor:pointer;accent-color:var(--color-gold);}.form-check__label{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal);}.form-check__label a{color:var(--color-gold);text-decoration:underline;}/* Error States */ .form-input--error,.form-select--error,.form-textarea--error{border-color:#dc3545;}.form-error{display:block;font-size:var(--text-xs);color:#dc3545;margin-top:var(--space-2);}/* Success State */ .form-input--success,.form-select--success,.form-textarea--success{border-color:#28a745;}/* Submit Button */ .form-submit{width:100%;}/* Multi-step Form */ .form-steps{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);}.form-step-indicator{width:10px;height:10px;border-radius:50%;background-color:var(--color-gray-300);transition:background-color var(--transition-fast);}.form-step-indicator--active{background-color:var(--color-gold);}.form-step-indicator--completed{background-color:var(--color-gold);}/* Form Step Content */ .form-step,.contact-form__step{display:none;}.form-step--active,.contact-form__step--active{display:block;animation:fadeIn var(--transition-base);}/* Contact Form Buttons */ .contact-form__buttons{display:flex;gap:var(--space-4);margin-top:var(--space-6);}.contact-form__buttons .btn{flex:1;}/* Su schermo stretto i due bottoni vanno impilati. Affiancati servono ~426px ("Indietro" 164 + "Verifica disponibilita'" 246 + gap),ma nel form ne restano circa 300:`flex:1` non basta a rimpicciolirli perche' min-width:auto li tiene alla larghezza minima del contenuto,che con white-space:nowrap e' il testo intero. Il secondo bottone finiva quindi fuori dal contenitore. Ordine DOM preservato:la sequenza visiva coincide con quella di tabulazione. */ @media (max-width:560px){.contact-form__buttons{flex-direction:column;}.contact-form__buttons .btn{width:100%;}}/* Back Button - Text only with arrow */ .btn--outline,.btn--back{background-color:transparent;border:none;color:var(--color-text);font-size:0.75rem;font-weight:400;padding:0;display:inline-flex;align-items:center;gap:0.35rem;cursor:pointer;transition:color var(--transition-fast);flex:0 !important;}.btn--outline::before,.btn--back::before{content:'←';font-size:0.85rem;transition:transform var(--transition-fast);}.btn--outline:hover,.btn--back:hover{color:var(--color-gold);}.btn--outline:hover::before,.btn--back:hover::before{transform:translateX(-3px);}@keyframes fadeIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}/* Form Navigation */ .form-nav{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);}.form-nav .btn{flex:1;}/* Date Picker Styling */ .form-input[type="date"]{position:relative;}.form-input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.6;transition:opacity var(--transition-fast);}.form-input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}/* Form Help Text */ .form-help{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2);}/* Inline Form (e.g.,Newsletter) */ .form-inline{display:flex;gap:var(--space-2);}.form-inline .form-input{flex:1;}.form-inline .btn{flex-shrink:0;}@media (max-width:480px){.form-inline{flex-direction:column;}.form-inline .btn{width:100%;}}/* Custom Checkbox GDPR */ .form-group--checkbox{margin-top:var(--space-4);}.form-checkbox{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;position:relative;}.form-checkbox input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;}.form-checkbox__mark{flex-shrink:0;width:20px;height:20px;border:2px solid var(--color-gray-400);background-color:var(--color-white);position:relative;transition:all var(--transition-fast);}.form-checkbox input:checked + .form-checkbox__mark{background-color:var(--color-gold);border-color:var(--color-gold);}.form-checkbox__mark::after{content:'';position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--color-white);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity var(--transition-fast);}.form-checkbox input:checked + .form-checkbox__mark::after{opacity:1;}.form-checkbox input:focus + .form-checkbox__mark{box-shadow:0 0 0 3px rgba(196,150,74,0.2);}.form-checkbox__text{font-size:12px;color:var(--color-text-secondary);line-height:var(--leading-normal);}.form-checkbox__text a{color:var(--color-gold);text-decoration:underline;}.form-checkbox__text a:hover{color:var(--color-gold-hover);}/* Form Message */ .contact-form__message{margin-top:var(--space-4);padding:var(--space-4);font-size:var(--text-sm);text-align:center;display:none;}.contact-form__message--success{display:block;background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;}.contact-form__message--error{display:block;background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}/* Loading State */ .form-submit--loading{opacity:0.7;pointer-events:none;position:relative;}.form-submit--loading::after{content:'';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid var(--color-white);border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;}@keyframes spin{to{transform:translateY(-50%) rotate(360deg);}}/* Button with loader */ .btn__text{display:inline;}.btn__loader{display:none;}.form-submit--loading .btn__text{opacity:0.7;}.form-submit--loading .btn__loader{display:inline-block;width:16px;height:16px;margin-left:var(--space-2);border:2px solid var(--color-white);border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;}/* Checkbox error state */ .form-checkbox--error .form-checkbox__mark{border-color:#dc3545;}.form-checkbox--error .form-checkbox__text{color:#dc3545;}/* Focus visible for accessibility */ .form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px;}.form-checkbox input:focus-visible + .form-checkbox__mark{outline:2px solid var(--color-gold);outline-offset:2px;}/* Screen reader only text */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}/* Form error animation */ .form-input--error{animation:shake 0.4s ease;}@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}}/* Message focus state for accessibility */ .contact-form__message:focus{outline:2px solid var(--color-gold);outline-offset:2px;}/* Tabindex for message */ .contact-form__message[tabindex="-1"]:focus{outline:none;}/* ========================================================================== Footer Component ========================================================================== */ .footer{background-color:var(--color-white);color:var(--color-dark);padding:var(--space-16) 0 var(--space-8);border-top:1px solid var(--color-gray-200);}.footer__container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);}.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--space-10);margin-bottom:var(--space-12);}@media (min-width:768px){.footer__grid{grid-template-columns:2fr 1fr 1fr;gap:var(--space-12);}}/* Footer Logo */ .footer__brand{display:flex;flex-direction:column;align-items:flex-start;}.footer__logo{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:var(--space-6);}.footer__logo-name{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-normal);letter-spacing:var(--tracking-wider);text-transform:uppercase;line-height:1.2;}.footer__logo-tagline{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:var(--font-normal);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-gold);}.footer__logo-img{width:180px;height:auto;object-fit:contain;filter:brightness(0);}.footer__tagline{font-size:13px;color:var(--color-gray-600);line-height:1.6;max-width:280px;}/* Footer Navigation */ .footer__nav-title{font-size:var(--text-sm);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider);margin-bottom:var(--space-6);color:var(--color-dark);}.footer__nav-list{display:flex;flex-direction:column;gap:var(--space-3);}.footer__nav-link{color:var(--color-gray-600);font-size:var(--text-sm);transition:color var(--transition-fast);}.footer__nav-link:hover{color:var(--color-gold-dark);}/* Footer Contact Info */ .footer__contact{display:flex;flex-direction:column;gap:var(--space-3);}.footer__contact--compact{gap:var(--space-4);}.footer__contact--compact .footer__social{margin-top:var(--space-2);}.footer__contact-item{display:flex;align-items:flex-start;gap:var(--space-3);color:var(--color-gray-600);font-size:var(--text-sm);}.footer__contact-item svg{flex-shrink:0;width:18px;height:18px;color:var(--color-gold-dark);margin-top:2px;}.footer__contact-link{color:var(--color-gray-600);transition:color var(--transition-fast);}.footer__contact-link:hover{color:var(--color-gold-dark);}/* Footer Social Links */ .footer__social{display:flex;gap:var(--space-4);margin-top:var(--space-6);}.footer__social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--color-gray-600);transition:color var(--transition-fast),transform var(--transition-fast);}.footer__social-link:hover{color:var(--color-gold-dark);transform:translateY(-2px);}.footer__social-link svg{width:24px;height:24px;}/* Footer Bottom */ .footer__bottom{padding-top:var(--space-8);border-top:1px solid var(--color-gray-200);display:flex;flex-direction:column;gap:var(--space-4);text-align:center;}@media (min-width:768px){.footer__bottom{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;}}.footer__copyright{font-size:12px;color:var(--color-gray-500);}.footer__copyright a{color:var(--color-gray-600);transition:color var(--transition-fast);}.footer__copyright a:hover{color:var(--color-gold-dark);}.footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-4);}.footer__legal-link{font-size:var(--text-xs);color:var(--color-gray-500);transition:color var(--transition-fast);}.footer__legal-link:hover{color:var(--color-gold-dark);}/* Footer Credits */ .footer__credits{font-size:var(--text-xs);color:var(--color-gray-500);text-align:center;margin-top:var(--space-4);}.footer__credits a{color:var(--color-gray-600);font-weight:var(--font-medium);}.footer__credits a:hover{color:var(--color-gold-dark);}/* Back to Top Button */ .back-to-top{position:fixed;bottom:var(--space-8);right:var(--space-8);width:48px;height:48px;background-color:var(--color-gold);color:var(--color-white);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base),background-color var(--transition-fast);z-index:var(--z-fixed);}.back-to-top--visible{opacity:1;visibility:visible;transform:translateY(0);}.back-to-top:hover{background-color:var(--color-gold-hover);transform:translateY(-2px);}.back-to-top svg{width:24px;height:24px;}/* ========================================================================== Wedding Content Creation - Page & Homepage Components Family look Gianni Licitra Films + social language (vertical,stories,likes) ========================================================================== */ /* ------------------------------------------------------------------------- Phone Mockup (9:16) with Story UI ------------------------------------------------------------------------- */ /* iPhone-style frame:titanium edge,side buttons,Dynamic Island */ .wcc-phone{position:relative;width:min(330px,80vw);background:linear-gradient(145deg,#2a2c2f,#131416);border-radius:54px;padding:12px;box-shadow:0 0 0 2px #4a4d52,0 0 0 3px rgb(255 255 255 / 0.12),0 34px 70px -18px rgb(0 0 0 / 0.5);margin:0 auto;}/* Volume buttons (left side) */ .wcc-phone::before{content:'';position:absolute;left:-5px;top:24%;width:3px;height:34px;border-radius:2px;background:#4a4d52;box-shadow:0 46px 0 #4a4d52;}/* Power button (right side) */ .wcc-phone::after{content:'';position:absolute;right:-5px;top:30%;width:3px;height:58px;border-radius:2px;background:#4a4d52;}.wcc-phone--ghost::before,.wcc-phone--ghost::after{content:none;}.wcc-phone--sm{width:min(280px,70vw);border-radius:48px;padding:10px;}.wcc-phone__screen{position:relative;border-radius:42px;overflow:hidden;aspect-ratio:9 / 19.5;background:var(--color-gray-900);}.wcc-phone--sm .wcc-phone__screen{border-radius:38px;}/* Dynamic Island */ .wcc-phone__island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:82px;height:24px;background:#000;border-radius:var(--radius-full);z-index:5;}.wcc-phone__screen img,.wcc-phone__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}.wcc-phone__notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:88px;height:22px;background:var(--color-dark);border-radius:var(--radius-full);z-index:4;}/* Story progress bars (below the Dynamic Island safe area) */ .wcc-phone__bars{position:absolute;top:48px;left:14px;right:14px;display:flex;gap:5px;z-index:3;}.wcc-phone__bar{flex:1;height:3px;border-radius:var(--radius-full);background:rgb(255 255 255 / 0.35);overflow:hidden;}.wcc-phone__bar--done{background:var(--color-white);}.wcc-phone__bar--live::before{content:'';display:block;height:100%;width:100%;background:var(--color-white);transform-origin:left;animation:wcc-story-progress 6s linear infinite;}@keyframes wcc-story-progress{from{transform:scaleX(0);}85%{transform:scaleX(1);}to{transform:scaleX(1);}}/* Sequenza automatica di 3 stories (18s:6s ciascuna) */ .wcc-phone__bar--seq1::before,.wcc-phone__bar--seq2::before,.wcc-phone__bar--seq3::before{content:'';display:block;height:100%;width:100%;background:var(--color-white);transform-origin:left;transform:scaleX(0);}.wcc-phone__bar--seq1::before{animation:wcc-seq-bar1 18s linear infinite;}.wcc-phone__bar--seq2::before{animation:wcc-seq-bar2 18s linear infinite;}.wcc-phone__bar--seq3::before{animation:wcc-seq-bar3 18s linear infinite;}@keyframes wcc-seq-bar1{0%{transform:scaleX(0);}33.33%{transform:scaleX(1);}100%{transform:scaleX(1);}}@keyframes wcc-seq-bar2{0%,33.33%{transform:scaleX(0);}66.66%{transform:scaleX(1);}100%{transform:scaleX(1);}}@keyframes wcc-seq-bar3{0%,66.66%{transform:scaleX(0);}100%{transform:scaleX(1);}}.wcc-phone--stories .wcc-story{opacity:0;transition:none;}.wcc-story--1{animation:wcc-seq-img1 18s linear infinite;}.wcc-story--2{animation:wcc-seq-img2 18s linear infinite;}.wcc-story--3{animation:wcc-seq-img3 18s linear infinite;}@keyframes wcc-seq-img1{0%{opacity:1;}31%{opacity:1;}34%{opacity:0;}96%{opacity:0;}100%{opacity:1;}}@keyframes wcc-seq-img2{0%,31%{opacity:0;}34%{opacity:1;}64%{opacity:1;}67%{opacity:0;}100%{opacity:0;}}@keyframes wcc-seq-img3{0%,64%{opacity:0;}67%{opacity:1;}96%{opacity:1;}100%{opacity:0;}}@media (prefers-reduced-motion:reduce){.wcc-phone__bar--seq1::before,.wcc-phone__bar--seq2::before,.wcc-phone__bar--seq3::before,.wcc-story--1,.wcc-story--2,.wcc-story--3{animation:none;}.wcc-story--1{opacity:1;}}/* Story header:avatar with gold ring + username + live time */ .wcc-phone__head{position:absolute;top:62px;left:14px;right:14px;display:flex;align-items:center;gap:8px;z-index:3;color:var(--color-white);text-shadow:0 1px 8px rgb(0 0 0 / 0.5);}.wcc-phone__avatar{width:34px;height:34px;border-radius:50%;padding:2px;background:linear-gradient(45deg,var(--color-gold-dark),var(--color-gold),#E8C685);flex-shrink:0;}.wcc-phone__avatar img{position:static;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--color-dark);}.wcc-phone__user{font-family:var(--font-body);font-size:12px;font-weight:var(--font-semibold);letter-spacing:0.02em;line-height:1.2;}.wcc-phone__time{font-family:var(--font-body);font-size:11px;font-weight:var(--font-normal);opacity:0.85;}/* Live badge */ .wcc-phone__live{position:absolute;top:66px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:10px;font-weight:var(--font-semibold);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-white);background:rgb(0 0 0 / 0.35);backdrop-filter:blur(4px);padding:4px 9px;border-radius:var(--radius-full);}.wcc-phone__live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--color-gold);animation:wcc-pulse 1.6s ease-in-out infinite;}@keyframes wcc-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.45;transform:scale(0.8);}}/* Bottom caption */ .wcc-phone__caption{position:absolute;left:12px;right:12px;bottom:16px;z-index:3;color:var(--color-white);font-family:var(--font-heading);font-style:italic;font-size:15px;text-align:center;text-shadow:0 1px 10px rgb(0 0 0 / 0.6);}.wcc-phone__screen::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgb(0 0 0 / 0.35) 0%,transparent 22%,transparent 62%,rgb(0 0 0 / 0.45) 100%);z-index:1;}/* ------------------------------------------------------------------------- Floating hearts (likes animation) ------------------------------------------------------------------------- */ .wcc-phone-wrap{position:relative;display:inline-block;}.wcc-hearts{position:absolute;bottom:40px;right:-14px;width:60px;height:240px;pointer-events:none;z-index:5;}.wcc-hearts span{position:absolute;bottom:0;left:50%;width:22px;height:22px;opacity:0;animation:wcc-heart-float 4.5s ease-in infinite;}.wcc-hearts span svg{width:100%;height:100%;fill:var(--color-gold);filter:drop-shadow(0 2px 6px rgb(0 0 0 / 0.25));}.wcc-hearts span:nth-child(2){animation-delay:0.9s;width:15px;height:15px;}.wcc-hearts span:nth-child(3){animation-delay:1.8s;width:26px;height:26px;}.wcc-hearts span:nth-child(4){animation-delay:2.7s;width:13px;height:13px;}.wcc-hearts span:nth-child(5){animation-delay:3.6s;width:19px;height:19px;}.wcc-hearts span:nth-child(even) svg{fill:#E8C685;}.wcc-hearts span:nth-child(3) svg{fill:#ffffff;}@keyframes wcc-heart-float{0%{transform:translate(-50%,0) scale(0.3);opacity:0;}10%{opacity:1;transform:translate(-50%,-20px) scale(1);}45%{transform:translate(calc(-50% - 14px),-110px) scale(1.05);opacity:0.9;}100%{transform:translate(calc(-50% + 10px),-230px) scale(0.7);opacity:0;}}/* ------------------------------------------------------------------------- WCC Hero (page) ------------------------------------------------------------------------- */ .wcc-hero{padding-top:calc(var(--header-height) + clamp(48px,8vw,110px));padding-bottom:0;background:radial-gradient(ellipse 70% 60% at 78% 30%,rgb(196 150 74 / 0.22),transparent 65%),radial-gradient(ellipse 40% 40% at 15% 85%,rgb(196 150 74 / 0.10),transparent 70%),var(--color-dark-bg);color:var(--color-white);overflow:hidden;position:relative;}/* Subtle grain-like texture via layered gradients */ .wcc-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgb(255 255 255 / 0.035) 1px,transparent 1px);background-size:26px 26px;pointer-events:none;}.wcc-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-8),5vw,var(--space-20));align-items:center;padding-bottom:clamp(var(--space-12),6vw,var(--space-20));}/* Bigger phone in the hero so the right side balances the copy */ .wcc-hero__phone{display:flex;justify-content:center;}.wcc-hero .wcc-phone{width:min(390px,84vw);}.wcc-hero .wcc-phone__caption{font-size:17px;}.wcc-hero__title{color:var(--color-white);}.wcc-hero .wcc-hero__text{color:var(--color-gray-100);font-size:var(--text-lg);line-height:var(--leading-relaxed);max-width:34em;}.wcc-hero .wcc-hero__platforms{color:var(--color-gray-500);}/* Ghost phones behind the main one (stacked stories feel) */ .wcc-phone--ghost{position:absolute;top:6%;left:-34%;transform:rotate(-9deg) scale(0.92);opacity:0.35;filter:saturate(0.6);z-index:-1;}.wcc-phone--ghost-right{left:auto;right:-30%;top:10%;transform:rotate(8deg) scale(0.86);opacity:0.25;}/* Social ticker strip */ .wcc-ticker{position:relative;border-top:1px solid rgb(196 150 74 / 0.3);padding:var(--space-4) 0;overflow:hidden;}.wcc-ticker__track{display:flex;width:max-content;animation:wcc-ticker 28s linear infinite;}.wcc-ticker__group{display:flex;align-items:center;flex-shrink:0;}.wcc-ticker__item{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:0.28em;text-transform:uppercase;color:var(--color-gold);white-space:nowrap;padding:0 var(--space-6);display:inline-flex;align-items:center;gap:var(--space-6);}.wcc-ticker__item::after{content:'\2665';font-size:9px;opacity:0.6;}@keyframes wcc-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}@media (prefers-reduced-motion:reduce){.wcc-ticker__track{animation:none;}}.wcc-kicker{display:inline-block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--space-5);}.wcc-hero__title{font-size:var(--text-4xl);font-style:italic;margin-bottom:var(--space-6);}.wcc-hero__claim{font-family:var(--font-heading);font-style:italic;font-size:var(--text-xl);color:var(--color-gold);margin-bottom:var(--space-5);}.wcc-hero__text{color:var(--color-text-secondary);max-width:52ch;margin-bottom:var(--space-5);}/* Reinforcement bullet list above the CTAs */ .wcc-hero__points{display:grid;gap:var(--space-3);margin-bottom:var(--space-8);}.wcc-hero__points li{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-gray-300);}.wcc-hero__points li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--color-gold);flex-shrink:0;}/* Platforms sign-off under the pills */ .wcc-hero__platforms{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-gray-500);}.wcc-hero__platform-icons{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-gold);}.wcc-hero__platform-icons svg{width:16px;height:16px;}.wcc-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);}.wcc-hero__trust{margin-top:var(--space-6);font-family:var(--font-heading);font-style:italic;font-size:var(--text-sm);color:var(--color-gray-500);}/* The site's .btn--outline carries a back-arrow::before (form "Indietro"):suppress it on this page's outline buttons */ .wcc-hero__cta .btn--outline::before,.wcc-cta__buttons .btn--outline::before{content:none;}/* ------------------------------------------------------------------------- Editorial section numbers (ContentLove-inspired) ------------------------------------------------------------------------- */ .wcc-secnum{display:flex;align-items:center;justify-content:center;gap:var(--space-4);font-family:var(--font-heading);font-style:italic;font-size:var(--text-lg);color:var(--color-gold);margin-bottom:var(--space-4);}.wcc-secnum::before,.wcc-secnum::after{content:'';width:44px;height:1px;background:rgb(196 150 74 / 0.45);}.wcc-secnum--left{justify-content:flex-start;}/* ------------------------------------------------------------------------- The Scene (emotional interstitial with photo background + notifications) ------------------------------------------------------------------------- */ .wcc-scene{position:relative;/* Relative URL (resolves from /assets/css/) so subdirectory deploys work */ background:linear-gradient(rgb(13 13 13 / 0.78),rgb(13 13 13 / 0.86)),url('../images/sections/brindisi-ricevimento-matrimonio-sicilia.webp') center 40% / cover no-repeat;color:var(--color-white);text-align:center;overflow:hidden;}.wcc-scene__lead{font-family:var(--font-heading);font-style:italic;font-size:var(--text-3xl);color:var(--color-gold);margin-bottom:var(--space-6);}.wcc-scene__text{font-family:var(--font-heading);font-size:var(--text-xl);line-height:var(--leading-relaxed);color:var(--color-gray-100);max-width:34em;margin:0 auto var(--space-6);}.wcc-scene__closing{font-family:var(--font-heading);font-style:italic;font-size:var(--text-lg);color:var(--color-gold);margin-bottom:var(--space-10);}/* Incoming DM-style notifications */ .wcc-bubbles{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);max-width:420px;margin:0 auto;}/* iOS-style Instagram push notification */ .wcc-bubble{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;text-align:left;background:rgb(40 40 42 / 0.72);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgb(255 255 255 / 0.08);border-radius:22px;padding:11px 14px;box-shadow:0 10px 34px -8px rgb(0 0 0 / 0.55);opacity:0;transform:translateY(14px) scale(0.97);}.reveal--visible .wcc-bubble{animation:wcc-bubble-in 600ms cubic-bezier(0.22,1,0.36,1) forwards;}.reveal--visible .wcc-bubble:nth-child(2){animation-delay:700ms;}.reveal--visible .wcc-bubble:nth-child(3){animation-delay:1400ms;}@keyframes wcc-bubble-in{to{opacity:1;transform:translateY(0) scale(1);}}/* Instagram app icon (authentic gradient) */ .wcc-bubble__appicon{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 110%,#FEDA75 0%,#FA7E1E 28%,#D62976 55%,#962FBF 80%,#4F5BD5 100%);color:var(--color-white);}.wcc-bubble__appicon svg{width:22px;height:22px;}.wcc-bubble__body{flex:1;min-width:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',var(--font-body),sans-serif;line-height:1.35;color:var(--color-gray-100);}.wcc-bubble__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:1px;}.wcc-bubble__app{font-size:13px;font-weight:var(--font-semibold);color:var(--color-white);}.wcc-bubble__name{font-weight:var(--font-semibold);color:var(--color-white);}.wcc-bubble__time{font-size:11px;color:rgb(255 255 255 / 0.5);}.wcc-bubble__text{display:block;font-size:13px;color:rgb(255 255 255 / 0.88);}@media (prefers-reduced-motion:reduce){.wcc-bubble{opacity:1;transform:none;animation:none;}}/* ------------------------------------------------------------------------- Live timeline (story-ring dots on a golden line) ------------------------------------------------------------------------- */ .wcc-timeline{position:relative;max-width:820px;margin:var(--space-16) auto 0;padding-left:0;}.wcc-timeline::before{content:'';position:absolute;top:8px;bottom:8px;left:50%;width:1px;background:linear-gradient(to bottom,rgb(196 150 74 / 0),rgb(196 150 74 / 0.6) 12%,rgb(196 150 74 / 0.6) 88%,rgb(196 150 74 / 0));}.wcc-timeline__item{position:relative;width:50%;padding:0 var(--space-10) var(--space-10) 0;}.wcc-timeline__item:nth-child(even){margin-left:50%;padding:0 0 var(--space-10) var(--space-10);}.wcc-timeline__item:last-child{padding-bottom:0;}.wcc-timeline__dot{position:absolute;top:4px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--color-white);border:2px solid var(--color-gold);box-shadow:0 0 0 4px rgb(196 150 74 / 0.18);}.wcc-timeline__item:nth-child(even) .wcc-timeline__dot{right:auto;left:-9px;}.wcc-timeline__card{text-align:right;}.wcc-timeline__item:nth-child(even) .wcc-timeline__card{text-align:left;}.wcc-timeline__time{display:inline-block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:var(--tracking-wider);color:var(--color-white);background:var(--color-gold);border-radius:var(--radius-full);padding:3px 12px;margin-bottom:var(--space-2);}.wcc-timeline__title{font-family:var(--font-heading);font-size:var(--text-xl);margin-bottom:var(--space-1);}.wcc-timeline__text{font-size:var(--text-sm);color:var(--color-text-secondary);}.wcc-timeline__note{text-align:center;font-family:var(--font-heading);font-style:italic;color:var(--color-text-secondary);margin-top:var(--space-12);}@media (max-width:700px){.wcc-timeline::before{left:8px;}.wcc-timeline__item,.wcc-timeline__item:nth-child(even){width:100%;margin-left:0;padding:0 0 var(--space-8) var(--space-8);}.wcc-timeline__dot,.wcc-timeline__item:nth-child(even) .wcc-timeline__dot{right:auto;left:0;}.wcc-timeline__card,.wcc-timeline__item:nth-child(even) .wcc-timeline__card{text-align:left;}}/* ------------------------------------------------------------------------- What is / list ------------------------------------------------------------------------- */ .wcc-what__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-8),5vw,var(--space-20));align-items:start;}.wcc-list{display:grid;gap:var(--space-5);margin-top:var(--space-8);}.wcc-list__item{border-left:2px solid var(--color-gold);padding-left:var(--space-5);}.wcc-list__title{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--color-text-primary);margin-bottom:var(--space-1);}.wcc-list__text{font-size:var(--text-sm);color:var(--color-text-secondary);}/* ------------------------------------------------------------------------- Why different - two pillars ------------------------------------------------------------------------- */ .wcc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-12);}.wcc-card{background:var(--color-white);border:1px solid var(--border-color);border-top:3px solid var(--color-gold);padding:clamp(var(--space-6),4vw,var(--space-10));box-shadow:var(--shadow-card);}.wcc-card__num{font-family:var(--font-heading);font-style:italic;font-size:var(--text-3xl);color:var(--color-gold);display:block;margin-bottom:var(--space-4);}.wcc-card__title{font-family:var(--font-heading);font-size:var(--text-xl);margin-bottom:var(--space-3);}.wcc-card__text{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed);}/* NOT list (dark strip) */ .wcc-not{background-color:var(--color-dark-bg);color:var(--color-white);}.wcc-not__title{color:var(--color-white);text-align:center;margin-bottom:var(--space-3);}.wcc-not__subtitle{text-align:center;color:var(--color-gray-400);font-family:var(--font-heading);font-style:italic;font-size:var(--text-lg);margin-bottom:var(--space-12);}.wcc-not__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--space-6),4vw,var(--space-12));max-width:1100px;margin:0 auto;}.wcc-not__item{border-top:1px solid var(--color-gray-700);padding-top:var(--space-5);font-size:var(--text-sm);color:var(--color-gray-300);line-height:var(--leading-relaxed);}.wcc-not__item strong{display:block;font-family:var(--font-heading);font-weight:var(--font-normal);font-size:var(--text-lg);color:var(--color-white);margin-bottom:var(--space-2);}.wcc-not__num{font-family:var(--font-heading);font-style:italic;color:var(--color-gold);font-size:var(--text-2xl);display:block;margin-bottom:var(--space-3);}/* ------------------------------------------------------------------------- Compare:Film vs Content ------------------------------------------------------------------------- */ .wcc-compare{max-width:1000px;margin:var(--space-12) auto 0;}.wcc-compare__head,.wcc-compare__row{display:grid;grid-template-columns:150px repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:stretch;}.wcc-compare__head{margin-bottom:var(--space-2);}.wcc-compare__col-title{font-family:var(--font-heading);font-size:var(--text-lg);text-align:center;padding:var(--space-4);}.wcc-compare__col-title--film{background:var(--color-dark);color:var(--color-white);}.wcc-compare__col-title--content{background:var(--color-gold);color:var(--color-white);}.wcc-compare__row{border-bottom:1px solid var(--border-color);}.wcc-compare__label{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-text-muted);padding:var(--space-5) 0;display:flex;align-items:center;}.wcc-compare__cell{padding:var(--space-5) var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;text-align:center;}.wcc-compare__cell--content{color:var(--color-text-primary);background:rgb(196 150 74 / 0.06);}.wcc-compare__quote{text-align:center;margin-top:var(--space-10);}/* Standalone note */ .wcc-standalone{max-width:760px;margin:var(--space-16) auto 0;text-align:center;background:var(--color-gray-50);border:1px solid var(--border-color);padding:clamp(var(--space-8),5vw,var(--space-12));}.wcc-standalone__title{font-size:var(--text-2xl);margin-bottom:var(--space-4);}.wcc-standalone__text{color:var(--color-text-secondary);}.wcc-standalone__quote{text-align:center;margin-top:var(--space-6);}/* ------------------------------------------------------------------------- How it works - 4 steps grid ------------------------------------------------------------------------- */ .wcc-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(var(--space-6),3vw,var(--space-10));margin-top:var(--space-12);}@media (max-width:1024px){.wcc-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width:640px){.wcc-process-grid{grid-template-columns:1fr;}}/* ------------------------------------------------------------------------- Examples:profile bar + reels grid ------------------------------------------------------------------------- */ .wcc-profilebar{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin:var(--space-10) auto var(--space-10);max-width:520px;border:1px solid var(--border-color);border-radius:var(--radius-full);padding:var(--space-3) var(--space-6);background:var(--color-white);box-shadow:var(--shadow-card);}.wcc-profilebar__avatar{width:46px;height:46px;border-radius:50%;padding:2px;background:linear-gradient(45deg,var(--color-gold-dark),var(--color-gold),#E8C685);flex-shrink:0;}.wcc-profilebar__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--color-white);}.wcc-profilebar__info{flex:1;min-width:0;}.wcc-profilebar__name{font-family:var(--font-body);font-weight:var(--font-semibold);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.wcc-profilebar__meta{font-size:var(--text-xs);color:var(--color-text-muted);}.wcc-profilebar__follow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider);background:var(--color-gold);color:var(--color-white);padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);transition:var(--transition-all);white-space:nowrap;}.wcc-profilebar__follow:hover{background:var(--color-gold-hover);color:var(--color-white);}.wcc-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--space-6),4vw,var(--space-12));max-width:1000px;margin:0 auto;}.wcc-reel{display:block;text-align:center;}.wcc-reel__media{display:block;position:relative;border-radius:26px;overflow:hidden;aspect-ratio:9 / 16;background:var(--color-gray-900);box-shadow:0 18px 40px -14px rgb(0 0 0 / 0.3);}.wcc-reel__title,.wcc-reel__text{display:block;}.wcc-reel__media img,.wcc-reel__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms ease;}.wcc-reel:hover .wcc-reel__media img,.wcc-reel:hover .wcc-reel__media video{transform:scale(1.05);}.wcc-reel__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgb(0 0 0 / 0.25) 0%,transparent 25%,transparent 55%,rgb(0 0 0 / 0.5) 100%);}.wcc-reel__tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:10px;font-weight:var(--font-semibold);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-white);background:rgb(0 0 0 / 0.35);backdrop-filter:blur(4px);padding:4px 10px;border-radius:var(--radius-full);}.wcc-reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);z-index:2;width:58px;height:58px;border-radius:50%;background:rgb(255 255 255 / 0.18);backdrop-filter:blur(6px);border:1px solid rgb(255 255 255 / 0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition-all);}.wcc-reel__play svg{width:22px;height:22px;fill:var(--color-white);margin-left:3px;}.wcc-reel:hover .wcc-reel__play{opacity:1;transform:translate(-50%,-50%) scale(1);}/* Social action rail (like/comment/share) */ .wcc-reel__rail{position:absolute;right:10px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:var(--space-4);align-items:center;}.wcc-reel__rail svg{width:24px;height:24px;fill:none;stroke:var(--color-white);stroke-width:1.8;filter:drop-shadow(0 1px 6px rgb(0 0 0 / 0.5));transition:var(--transition-transform);}.wcc-reel:hover .wcc-reel__rail svg:first-child{fill:var(--color-gold);stroke:var(--color-gold);animation:wcc-like-pop 500ms ease;}@keyframes wcc-like-pop{0%{transform:scale(1);}40%{transform:scale(1.45);}70%{transform:scale(0.9);}100%{transform:scale(1);}}.wcc-reel__title{font-family:var(--font-heading);font-size:var(--text-lg);margin-top:var(--space-5);}.wcc-reel__text{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-1);}/* ------------------------------------------------------------------------- Packages ------------------------------------------------------------------------- */ .wcc-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);align-items:stretch;margin-top:var(--space-12);}.wcc-pkg{position:relative;background:var(--color-white);border:1px solid var(--border-color);padding:clamp(var(--space-6),3vw,var(--space-10)) var(--space-6);display:flex;flex-direction:column;text-align:center;transition:var(--transition-all);}.wcc-pkg:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px);}.wcc-pkg--featured{border:2px solid var(--color-gold);box-shadow:var(--shadow-lg);}.wcc-pkg__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--color-gold);color:var(--color-white);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);white-space:nowrap;}.wcc-pkg__name{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;margin-bottom:var(--space-2);}.wcc-pkg__tagline{font-family:var(--font-heading);font-style:italic;font-size:var(--text-sm);color:var(--color-text-secondary);min-height:2.6em;margin-bottom:var(--space-5);}.wcc-pkg__price{font-family:var(--font-heading);font-size:var(--text-4xl);color:var(--color-gold);line-height:1;margin-bottom:var(--space-6);}.wcc-pkg__price small{font-size:0.4em;color:var(--color-text-muted);font-family:var(--font-body);}.wcc-pkg__features{text-align:left;font-size:var(--text-sm);color:var(--color-text-secondary);display:grid;gap:var(--space-3);margin-bottom:var(--space-8);flex:1;}.wcc-pkg__features li{padding-left:var(--space-5);position:relative;}.wcc-pkg__features li::before{content:'';position:absolute;left:0;top:0.55em;width:8px;height:8px;border-radius:50%;background:rgb(196 150 74 / 0.35);}.wcc-pkg__features li strong{color:var(--color-text-primary);}.wcc-packages-note{text-align:center;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-6);}.wcc-bundle{max-width:760px;margin:var(--space-10) auto 0;text-align:center;background:rgb(196 150 74 / 0.08);border:1px solid rgb(196 150 74 / 0.35);padding:var(--space-6) var(--space-8);font-size:var(--text-base);}/* ------------------------------------------------------------------------- Final CTA (dark) ------------------------------------------------------------------------- */ .wcc-cta{background-color:var(--color-dark-bg);color:var(--color-white);text-align:center;position:relative;overflow:hidden;}.wcc-cta__title{color:var(--color-white);margin-bottom:var(--space-5);}.wcc-cta__text{color:var(--color-gray-300);max-width:56ch;margin:0 auto var(--space-8);}.wcc-cta__buttons{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;}/* ------------------------------------------------------------------------- Homepage cross-sell section ------------------------------------------------------------------------- */ .home-wcc{background:radial-gradient(ellipse 55% 60% at 12% 30%,rgb(196 150 74 / 0.08),transparent 70%),var(--color-gray-50);overflow:hidden;}.home-wcc__grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:clamp(var(--space-8),6vw,var(--space-24));align-items:center;}.home-wcc__title{margin-bottom:var(--space-6);}.home-wcc__text{color:var(--color-text-secondary);margin-bottom:var(--space-4);}.home-wcc__cta{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4);}/* Hero badge (homepage) */ .hero__wcc-badge{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-6);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-white);border:1px solid rgb(255 255 255 / 0.4);border-radius:var(--radius-full);padding:var(--space-2) var(--space-5);backdrop-filter:blur(4px);background:rgb(0 0 0 / 0.2);transition:var(--transition-all);}.hero__wcc-badge:hover{border-color:var(--color-gold);color:var(--color-gold);}.hero__wcc-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--color-gold);animation:wcc-pulse 1.6s ease-in-out infinite;}/* ------------------------------------------------------------------------- Floating Wedding Content pill (homepage) ------------------------------------------------------------------------- */ .wcc-pill{position:fixed;left:var(--space-6);bottom:var(--space-6);z-index:var(--z-fixed);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity var(--transition-slow),transform var(--transition-slow),visibility var(--transition-slow);}.wcc-pill--visible{opacity:1;visibility:visible;transform:translateY(0);}.wcc-pill--hidden{display:none;}.wcc-pill__link{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-white);transition:var(--transition-transform);}.wcc-pill__link:hover{color:var(--color-white);transform:translateY(-3px);}.wcc-pill__close{position:absolute;top:-6px;right:-10px;z-index:7;width:22px;height:22px;border-radius:50%;background:rgb(20 20 20 / 0.8);color:rgb(255 255 255 / 0.85);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgb(0 0 0 / 0.35);}.wcc-pill__close:hover{background:var(--color-black);}/* Mini iPhone with live reel */ .wcc-pill__device{position:relative;display:block;}.wcc-pill__bollino{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:6;background:linear-gradient(135deg,#F43F5E,#BE123C);color:var(--color-white);font-family:var(--font-body);font-size:8px;font-weight:var(--font-bold);letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full);white-space:nowrap;box-shadow:0 6px 16px rgb(190 18 60 / 0.5);animation:wcc-like-pop 2.4s ease infinite;}.wcc-pill__screen{display:block;position:relative;width:96px;aspect-ratio:9 / 19.5;border-radius:22px;overflow:hidden;background:var(--color-gray-900);border:5px solid #1c1e20;box-shadow:0 0 0 1.5px #4a4d52,0 16px 40px -10px rgb(0 0 0 / 0.55);}.wcc-pill__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}/* Floating likes rising from the mini phone */ .wcc-pill__hearts{position:absolute;bottom:16px;right:-8px;width:34px;height:120px;pointer-events:none;z-index:6;}.wcc-pill__hearts span{position:absolute;bottom:0;left:50%;width:13px;height:13px;opacity:0;animation:wcc-pill-heart 3.8s ease-in infinite;}.wcc-pill__hearts span svg{width:100%;height:100%;fill:#F43F5E;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 0.3));}.wcc-pill__hearts span:nth-child(2){animation-delay:1s;width:9px;height:9px;}.wcc-pill__hearts span:nth-child(3){animation-delay:2s;width:15px;height:15px;}.wcc-pill__hearts span:nth-child(4){animation-delay:3s;width:10px;height:10px;}.wcc-pill__hearts span:nth-child(even) svg{fill:var(--color-white);}.wcc-pill__hearts span:nth-child(3) svg{fill:#E8C685;}@keyframes wcc-pill-heart{0%{transform:translate(-50%,0) scale(0.3);opacity:0;}12%{opacity:1;transform:translate(-50%,-12px) scale(1);}50%{transform:translate(calc(-50% - 8px),-60px) scale(1.05);opacity:0.9;}100%{transform:translate(calc(-50% + 6px),-112px) scale(0.7);opacity:0;}}.wcc-pill__chip{display:inline-flex;align-items:center;gap:6px;background:var(--color-dark);color:var(--color-white);font-family:var(--font-body);font-size:12px;font-weight:var(--font-semibold);padding:7px 14px;border-radius:var(--radius-full);border:1px solid rgb(196 150 74 / 0.6);box-shadow:0 8px 24px rgb(0 0 0 / 0.35);white-space:nowrap;}.wcc-pill__chip b{color:#E8C685;font-weight:var(--font-bold);}/* Mobile:story bubble */ @media (max-width:640px){.wcc-pill{left:var(--space-4);bottom:var(--space-4);}.wcc-pill__screen{width:62px;height:62px;aspect-ratio:1;border-radius:50%;border-width:3px;box-shadow:0 0 0 2px #F43F5E,0 0 0 4px rgb(196 150 74 / 0.5),0 10px 26px -8px rgb(0 0 0 / 0.5);}.wcc-pill__bollino{font-size:7px;padding:3px 8px;}.wcc-pill__hearts{display:none;}.wcc-pill__chip{font-size:10px;padding:5px 11px;}}@media (prefers-reduced-motion:reduce){.wcc-pill__hearts,.wcc-pill__bollino{animation:none;}.wcc-pill__hearts{display:none;}}@media (prefers-reduced-motion:reduce){.wcc-pill__heart{animation:none;}}/* ------------------------------------------------------------------------- Contact form upsell box ------------------------------------------------------------------------- */ .form-wcc{position:relative;border:1px solid rgb(196 150 74 / 0.45);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-8) 0 var(--space-6);}.form-wcc__badge{position:absolute;top:0;left:var(--space-4);transform:translateY(-50%);background:var(--color-gold);color:var(--color-white);font-size:10px;font-weight:var(--font-semibold);letter-spacing:0.16em;text-transform:uppercase;padding:3px 12px;border-radius:var(--radius-full);}.form-wcc__kicker{display:block;font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--space-3);}.form-wcc .form-checkbox__text{font-size:16px;font-weight:var(--font-medium);line-height:1.4;text-wrap:balance;}.form-wcc__link{display:inline-block;margin-top:var(--space-3);padding-left:34px;font-size:11px;font-weight:var(--font-semibold);letter-spacing:0.08em;text-transform:uppercase;color:var(--color-gold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}/* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width:1024px){.wcc-not__grid{grid-template-columns:1fr;gap:var(--space-8);}}@media (max-width:900px){.wcc-what__grid,.home-wcc__grid{grid-template-columns:1fr;}.home-wcc__grid .wcc-phone-wrap{order:2;margin-top:var(--space-8);}/* Hero:colonna singola,mockup sopra e tutto il testo sotto */ .wcc-hero__grid{display:flex;flex-direction:column;}.wcc-hero__phone{order:-1;margin:0 0 var(--space-10);}.wcc-hero .wcc-phone{width:min(220px,50vw);}.wcc-cards{grid-template-columns:1fr;}.wcc-reels{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}.wcc-packages{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}.wcc-pkg--featured{order:-1;}.wcc-compare__head,.wcc-compare__row{grid-template-columns:90px repeat(2,minmax(0,1fr));}}@media (max-width:640px){/* Hero phone compatto con story UI ridotta */ .wcc-hero .wcc-phone{width:min(175px,46vw);border-radius:34px;padding:7px;}.wcc-hero .wcc-phone__screen{border-radius:26px;}.wcc-hero .wcc-phone__island{width:54px;height:16px;top:8px;}.wcc-hero .wcc-phone__bars{top:30px;left:10px;right:10px;}.wcc-hero .wcc-phone__head{top:40px;left:10px;right:10px;gap:6px;}.wcc-hero .wcc-phone__avatar{width:26px;height:26px;}.wcc-hero .wcc-phone__user{font-size:10px;}.wcc-hero .wcc-phone__time{font-size:9px;}.wcc-hero .wcc-phone__live{top:42px;right:10px;font-size:8px;padding:3px 7px;}.wcc-hero .wcc-phone__caption{font-size:12px;bottom:10px;}.wcc-hero .wcc-hearts{height:130px;width:40px;right:-10px;bottom:14px;}.wcc-hero .wcc-hearts span:nth-child(4),.wcc-hero .wcc-hearts span:nth-child(5){display:none;}/* Reel:carosello swipe a scorrimento orizzontale (stile stories) */ .wcc-reels{display:flex;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);margin:0 calc(-1 * var(--container-padding));padding:0 var(--container-padding) var(--space-4);scrollbar-width:none;-webkit-overflow-scrolling:touch;}.wcc-reels::-webkit-scrollbar{display:none;}.wcc-reel{flex:0 0 68vw;scroll-snap-align:center;}.wcc-compare__head{grid-template-columns:repeat(2,minmax(0,1fr));}.wcc-compare__head .wcc-compare__spacer{display:none;}.wcc-compare__row{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:var(--space-4);}.wcc-compare__label{grid-column:1 / -1;padding:0 0 var(--space-2);justify-content:center;}.wcc-compare__cell{padding:var(--space-3);}.wcc-compare__quote{margin-top:var(--space-6);}.wcc-profilebar{padding:var(--space-3) var(--space-4);}.wcc-profilebar__meta{display:none;}}/* Sticky CTA (solo mobile) */ .wcc-sticky-cta{display:none;}@media (max-width:640px){.wcc-sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-fixed);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:rgb(255 255 255 / 0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border-color);transform:translateY(105%);transition:transform var(--transition-slow);}.wcc-sticky-cta--visible{transform:translateY(0);}.wcc-sticky-cta .btn{width:100%;min-height:48px;}}/* Reduced motion */ @media (prefers-reduced-motion:reduce){.wcc-hearts span,.wcc-phone__bar--live::before,.wcc-phone__live::before,.hero__wcc-badge::before{animation:none;}.wcc-hearts{display:none;}}/* ========================================================================== Responsive Utilities & Media Queries ========================================================================== */ /* ------------------------------------------------------------------------- Breakpoint Reference:- Mobile:< 576px - Small:576px - 767px - Medium (Tablet):768px - 991px - Large (Desktop):992px - 1199px - XL:1200px - 1399px - XXL:1400px+ ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Mobile First Base Styles (already in main.css) These overrides are for larger screens ------------------------------------------------------------------------- */ /* Small devices (landscape phones,576px and up) */ @media (min-width:576px){.container{padding-left:var(--space-8);padding-right:var(--space-8);}}/* Medium devices (tablets,768px and up) */ @media (min-width:768px){/* Grid adjustments */ .grid--2-md{grid-template-columns:repeat(2,1fr);}.grid--3-md{grid-template-columns:repeat(3,1fr);}/* Text alignment */ .text-left-md{text-align:left;}.text-center-md{text-align:center;}/* Display utilities */ .hide-md{display:none !important;}.show-md{display:block !important;}.flex-md{display:flex !important;}}/* Large devices (desktops,992px and up) */ @media (min-width:992px){/* Grid adjustments */ .grid--2-lg{grid-template-columns:repeat(2,1fr);}.grid--3-lg{grid-template-columns:repeat(3,1fr);}.grid--4-lg{grid-template-columns:repeat(4,1fr);}/* Display utilities */ .hide-lg{display:none !important;}.show-lg{display:block !important;}.flex-lg{display:flex !important;}/* Flex direction */ .flex-row-lg{flex-direction:row !important;}}/* Extra large devices (large desktops,1200px and up) */ @media (min-width:1200px){.container{padding-left:var(--space-12);padding-right:var(--space-12);}}/* XXL devices (1400px and up) */ @media (min-width:1400px){/* Max container already handled */}/* ------------------------------------------------------------------------- Mobile-specific overrides (max-width queries) Use sparingly - prefer mobile-first approach ------------------------------------------------------------------------- */ /* Tablets and below */ @media (max-width:991px){/* Stack grids on mobile */ .grid--stack-mobile{grid-template-columns:1fr !important;}/* Reduce section padding */ .section{padding-top:var(--section-padding-y-sm);padding-bottom:var(--section-padding-y-sm);}/* Hide on mobile/tablet */ .hide-until-lg{display:none !important;}}/* Mobile only */ @media (max-width:767px){/* Typography adjustments for better mobile UX */ h1{font-size:clamp(1.75rem,6vw,2.5rem);line-height:1.2;}h2{font-size:clamp(1.5rem,5vw,2rem);line-height:1.25;}h3{font-size:clamp(1.25rem,4vw,1.5rem);line-height:1.3;}/* Section titles */ .intro__title,.about__title,.section-header__title,.gallery__title,.testimonials__title,.faq__title,.contact-cta__title{font-size:clamp(1.5rem,5vw,2rem);line-height:1.25;}/* Hero headline - larger but still readable */ .hero__headline{font-size:clamp(1.75rem,6vw,2.5rem);line-height:1.15;}/* Body text improvements */ .intro__text,.about__text,.process__step-text{font-size:1rem;line-height:1.7;}/* Button full width on mobile */ .btn--full-mobile{width:100%;}/* CTA buttons stack on mobile */ .intro__cta,.about__cta{flex-direction:column;gap:0.75rem;}.intro__cta .btn,.about__cta .btn{width:100%;justify-content:center;}/* Testimonials section */ .testimonials__header{margin-bottom:2rem;}.testimonials__title{font-size:clamp(1.375rem,4.5vw,1.75rem);}/* Gallery section */ .gallery__title{font-size:clamp(1.375rem,4.5vw,1.75rem);}/* Process steps */ .process__step-number{font-size:2.5rem;}.process__step-title{font-size:0.75rem;}/* Stack flex items */ .flex-col-mobile{flex-direction:column !important;}/* Center on mobile */ .center-mobile{text-align:center;margin-left:auto;margin-right:auto;}/* Hide on mobile */ .hide-mobile{display:none !important;}.show-mobile{display:block !important;}/* Hide section divider on mobile */ .section--divider{display:none !important;}}/* Small mobile */ @media (max-width:375px){.container{padding-left:var(--space-4);padding-right:var(--space-4);}.btn{padding:var(--space-3) var(--space-6);font-size:var(--text-xs);}}/* ------------------------------------------------------------------------- Aspect Ratio Utilities ------------------------------------------------------------------------- */ .aspect-square{aspect-ratio:1;}.aspect-video{aspect-ratio:16 / 9;}.aspect-portrait{aspect-ratio:3 / 4;}.aspect-landscape{aspect-ratio:4 / 3;}/* ------------------------------------------------------------------------- Spacing Utilities - Responsive ------------------------------------------------------------------------- */ @media (max-width:767px){.mb-sm-mobile{margin-bottom:var(--space-4) !important;}.mb-md-mobile{margin-bottom:var(--space-8) !important;}.mb-lg-mobile{margin-bottom:var(--space-12) !important;}.py-sm-mobile{padding-top:var(--space-4) !important;padding-bottom:var(--space-4) !important;}}/* ------------------------------------------------------------------------- Image Responsive Utilities ------------------------------------------------------------------------- */ .img-fluid{max-width:100%;height:auto;}.img-cover{width:100%;height:100%;object-fit:cover;}.img-contain{width:100%;height:100%;object-fit:contain;}/* ------------------------------------------------------------------------- Order Utilities ------------------------------------------------------------------------- */ .order-first{order:-1;}.order-last{order:999;}@media (min-width:768px){.order-first-md{order:-1;}.order-last-md{order:999;}.order-none-md{order:0;}}@media (min-width:992px){.order-first-lg{order:-1;}.order-last-lg{order:999;}.order-none-lg{order:0;}}/* ------------------------------------------------------------------------- Print Styles ------------------------------------------------------------------------- */ @media print{*,*::before,*::after{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]::after{content:" (" attr(href) ")";}img{max-width:100% !important;page-break-inside:avoid;}h2,h3{page-break-after:avoid;}.header,.footer,.nav-overlay,.back-to-top{display:none !important;}.section{page-break-inside:avoid;}}/* ------------------------------------------------------------------------- Reduced Motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}/* ------------------------------------------------------------------------- High Contrast Mode ------------------------------------------------------------------------- */ @media (prefers-contrast:high){:root{--color-gold:#B8860B;--color-gray-400:#666;--color-gray-500:#555;}.btn{border-width:3px;}a:focus,button:focus{outline-width:3px;}}/* ------------------------------------------------------------------------- Dark Mode Support (optional) ------------------------------------------------------------------------- */ @media (prefers-color-scheme:dark){/* * Uncomment if you want automatic dark mode * Currently the site has dark sections by design */ /*:root{--color-text-primary:var(--color-white);--color-text-secondary:var(--color-gray-300);}body{background-color:var(--color-dark-bg);color:var(--color-white);}*/}/* ========================================================================== Animations & Transitions ========================================================================== */ /* ------------------------------------------------------------------------- Fade Animations ------------------------------------------------------------------------- */ @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}@keyframes fadeInRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}/* ------------------------------------------------------------------------- Scale Animations ------------------------------------------------------------------------- */ @keyframes scaleIn{from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:scale(1);}}@keyframes scaleOut{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(0.9);}}/* ------------------------------------------------------------------------- Slide Animations ------------------------------------------------------------------------- */ @keyframes slideInUp{from{transform:translateY(100%);}to{transform:translateY(0);}}@keyframes slideInDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}@keyframes slideInLeft{from{transform:translateX(-100%);}to{transform:translateX(0);}}@keyframes slideInRight{from{transform:translateX(100%);}to{transform:translateX(0);}}/* ------------------------------------------------------------------------- Bounce Animation ------------------------------------------------------------------------- */ @keyframes bounce{0%,20%,53%,100%{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);transform:translateY(0);}40%,43%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translateY(-15px);}70%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translateY(-8px);}80%{transform:translateY(0);}90%{transform:translateY(-4px);}}/* ------------------------------------------------------------------------- Pulse Animation ------------------------------------------------------------------------- */ @keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}}/* ------------------------------------------------------------------------- Spin Animation ------------------------------------------------------------------------- */ @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}/* ------------------------------------------------------------------------- Shimmer Animation (Loading state) ------------------------------------------------------------------------- */ @keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}.loading-shimmer{background:linear-gradient( 90deg,var(--color-gray-200) 25%,var(--color-gray-100) 50%,var(--color-gray-200) 75% );background-size:200% 100%;animation:shimmer 1.5s infinite;}/* ------------------------------------------------------------------------- Animation Utility Classes ------------------------------------------------------------------------- */ .animate-fade-in{animation:fadeIn var(--transition-base) ease forwards;}.animate-fade-in-up{animation:fadeInUp var(--transition-slow) ease forwards;}.animate-fade-in-down{animation:fadeInDown var(--transition-slow) ease forwards;}.animate-fade-in-left{animation:fadeInLeft var(--transition-slow) ease forwards;}.animate-fade-in-right{animation:fadeInRight var(--transition-slow) ease forwards;}.animate-scale-in{animation:scaleIn var(--transition-base) ease forwards;}.animate-bounce{animation:bounce 1s ease infinite;}.animate-pulse{animation:pulse 2s ease infinite;}.animate-spin{animation:spin 1s linear infinite;}/* ------------------------------------------------------------------------- Scroll-triggered Animations (used with Intersection Observer) ------------------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(30px);transition:opacity var(--transition-slow) ease,transform var(--transition-slow) ease;}/* ATTENZIONE:qui serve translateY(0) e NON transform:none. La trasformazione,anche a valore zero,crea un contesto di impilamento:i ghost phone dietro i mockup hanno z-index:-1 e senza quel contesto finiscono dietro lo sfondo della sezione,diventando invisibili. */ .reveal--visible{opacity:1;transform:translateY(0);}.reveal--left{transform:translateX(-30px);}.reveal--left.reveal--visible{transform:translateX(0);}.reveal--right{transform:translateX(30px);}.reveal--right.reveal--visible{transform:translateX(0);}.reveal--scale{transform:scale(0.95);}.reveal--scale.reveal--visible{transform:scale(1);}/* Staggered children animation */ .reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity var(--transition-base) ease,transform var(--transition-base) ease;}.reveal-stagger.reveal--visible>*:nth-child(1){transition-delay:0s;}.reveal-stagger.reveal--visible>*:nth-child(2){transition-delay:0.1s;}.reveal-stagger.reveal--visible>*:nth-child(3){transition-delay:0.2s;}.reveal-stagger.reveal--visible>*:nth-child(4){transition-delay:0.3s;}.reveal-stagger.reveal--visible>*:nth-child(5){transition-delay:0.4s;}.reveal-stagger.reveal--visible>*:nth-child(6){transition-delay:0.5s;}.reveal-stagger.reveal--visible>*{opacity:1;transform:translateY(0);}/* ------------------------------------------------------------------------- Hover Effects ------------------------------------------------------------------------- */ .hover-lift{transition:transform var(--transition-base),box-shadow var(--transition-base);}.hover-lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}.hover-scale{transition:transform var(--transition-base);}.hover-scale:hover{transform:scale(1.05);}.hover-glow{transition:box-shadow var(--transition-base);}.hover-glow:hover{box-shadow:0 0 20px rgba(196,150,74,0.4);}/* Image hover zoom */ .img-zoom{overflow:hidden;}.img-zoom img{transition:transform var(--transition-slow);}.img-zoom:hover img{transform:scale(1.1);}/* ------------------------------------------------------------------------- Link Underline Animation ------------------------------------------------------------------------- */ .link-underline{position:relative;display:inline-block;}.link-underline::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--color-gold);transition:width var(--transition-base);}.link-underline:hover::after{width:100%;}/* From center variant */ .link-underline--center::after{left:50%;transform:translateX(-50%);}/* ------------------------------------------------------------------------- Button Press Effect ------------------------------------------------------------------------- */ .btn-press{transition:transform var(--transition-fast);}.btn-press:active{transform:scale(0.97);}/* ------------------------------------------------------------------------- Parallax (CSS only,subtle) ------------------------------------------------------------------------- */ .parallax-bg{background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}/* Disable on mobile for better performance */ @media (max-width:991px){.parallax-bg{background-attachment:scroll;}}/* ------------------------------------------------------------------------- Text Reveal Animation ------------------------------------------------------------------------- */ .text-reveal{overflow:hidden;}.text-reveal span{display:inline-block;transform:translateY(100%);transition:transform var(--transition-slow) ease;}.text-reveal.reveal--visible span{transform:translateY(0);}/* ========================================================================== Main Stylesheet - Gianni Licitra Films ========================================================================== */ /* Imports - Google Fonts loaded async in HTML */ /* ========================================================================== Reset & Base ========================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}/* Remove default list styles */ ul,ol{list-style:none;}/* Links */ a{color:inherit;text-decoration:none;transition:var(--transition-color);}a:hover{color:var(--color-gold);}/* Images */ img{max-width:100%;height:auto;display:block;}/* Buttons */ button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;}/* Form elements */ input,textarea,select{font-family:inherit;font-size:inherit;}/* Focus styles */:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px;}/* Selection */::selection{background-color:var(--color-gold);color:var(--color-white);}/* ========================================================================== Typography ========================================================================== */ h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-normal);line-height:var(--leading-tight);color:var(--color-text-primary);}h1{font-size:var(--text-5xl);}h2{font-size:var(--text-4xl);font-style:italic;}h3{font-size:var(--text-3xl);}h4{font-size:var(--text-2xl);}h5{font-size:var(--text-xl);}h6{font-size:var(--text-lg);}p{margin-bottom:var(--space-4);}p:last-child{margin-bottom:0;}.text-gold{color:var(--color-gold);}.text-italic{font-style:italic;}.text-center{text-align:center;}.text-uppercase{text-transform:uppercase;letter-spacing:var(--tracking-widest);}/* ========================================================================== Layout ========================================================================== */ .container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);}.container--narrow{max-width:var(--container-narrow);}.section{padding-top:var(--section-padding-y);padding-bottom:var(--section-padding-y);}.section--dark{background-color:var(--color-dark-bg);color:var(--color-white);}.section--light{background-color:var(--color-gray-50);}/* Grid */ .grid{display:grid;gap:var(--space-8);}.grid--2{grid-template-columns:repeat(2,1fr);}.grid--3{grid-template-columns:repeat(3,1fr);}/* Flex utilities */ .flex{display:flex;}.flex-col{flex-direction:column;}.items-center{align-items:center;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.gap-4{gap:var(--space-4);}.gap-8{gap:var(--space-8);}/* ========================================================================== Buttons ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4) var(--space-8);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:var(--tracking-wider);border-radius:0;transition:var(--transition-all);cursor:pointer;white-space:nowrap;}.btn--primary{background-color:var(--color-gold);color:var(--color-white);border:2px solid var(--color-gold);}.btn--primary:hover{background-color:var(--color-gold-hover);border-color:var(--color-gold-hover);color:var(--color-white);}.btn--secondary{background-color:var(--color-black);color:var(--color-white);border:2px solid var(--color-black);}.btn--secondary:hover{background-color:var(--color-gray-800);border-color:var(--color-gray-800);color:var(--color-white);}.btn--outline{background-color:transparent;color:var(--color-white);border:2px solid var(--color-white);}.btn--outline:hover{background-color:var(--color-white);color:var(--color-black);}.btn--icon{padding:var(--space-3);}/* ========================================================================== Full Width Image ========================================================================== */ .full-image{width:100%;height:auto;display:block;}.full-image--cover{height:60vh;min-height:400px;object-fit:cover;}/* Image with shadow offset effect */ .image-offset{position:relative;}.image-offset::before{content:'';position:absolute;top:20px;left:-20px;right:20px;bottom:-20px;background-color:var(--color-gray-100);z-index:-1;}.image-offset img{position:relative;z-index:1;}/* ========================================================================== Skip Link (Accessibility) ========================================================================== */ .skip-link{position:absolute;top:-40px;left:0;background:var(--color-gold);color:var(--color-white);padding:var(--space-2) var(--space-4);z-index:var(--z-tooltip);transition:top var(--transition-fast);}.skip-link:focus{top:0;}/* ========================================================================== Visually Hidden (Screen Reader Only) ========================================================================== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}