/* ========================================================================== damos.css — Common styles + brand theming for all Damos pages Usage: 1) Add on : data-brand="scuola" | "pa" | "impresa" | "enterprise" 2) Include this file after Tailwind (if you use it), so overrides apply. ========================================================================== */ /* ---------- Brand tokens (defaults) ---------- */ :root{ --brand-accent: #2563EB; /* fallback */ --brand-accent-600: #1D4ED8; --brand-accent-700: #1E40AF; --brand-hero-from: #0F172A; /* slate-900 */ --brand-hero-to: #1D4ED8; /* blue-700 */ --surface: #FFFFFF; --surface-2: #F8FAFC; /* slate-50 */ --border: #E5E7EB; /* gray-200 */ --text: #0F172A; /* slate-900 */ --muted: #475569; /* slate-600 */ --nav-height: 72px; } /* ---------- Brand overrides ---------- */ html[data-brand="scuola"]{ --brand-accent: #2563EB; /* Royal Blue */ --brand-accent-600: #1D4ED8; --brand-accent-700: #1E40AF; --brand-hero-from: #1E3A8A; /* indigo-900-ish */ --brand-hero-to: #2563EB; /* royal blue */ } html[data-brand="pa"]{ --brand-accent: #0D9488; /* Teal */ --brand-accent-600: #0F766E; --brand-accent-700: #115E59; --brand-hero-from: #0F172A; --brand-hero-to: #0D9488; } html[data-brand="impresa"]{ --brand-accent: #F59E0B; /* Amber */ --brand-accent-600: #D97706; --brand-accent-700: #B45309; --brand-hero-from: #0F172A; --brand-hero-to: #B45309; } html[data-brand="enterprise"]{ --brand-accent: #4F46E5; /* Deep Indigo / Violet */ --brand-accent-600: #4338CA; --brand-accent-700: #3730A3; --brand-hero-from: #0F172A; --brand-hero-to: #4F46E5; } /* ---------- Damos.Tech (centrale) overrides ---------- */ html[data-brand="tech"]{ --brand-accent: #4B5563; /* Dark Gray (slate) */ --brand-accent-600: #374151; --brand-accent-700: #1F2937; --brand-hero-from: #1F2937; /* Dark Slate */ --brand-hero-to: #4B5563; /* Dark Gray */ } /* ---------- Global behavior ---------- */ html{ scroll-behavior: smooth; /* fallback; JS will also handle offset for sticky nav */ } section{ scroll-margin-top: calc(var(--nav-height) + 12px); } ::selection{ background: rgba(37, 99, 235, 0.18); } /* ---------- Utility classes (shared) ---------- */ .damos-container{ max-width: 72rem; /* 1152px */ margin-left: auto; margin-right: auto; } .damos-hero{ background: linear-gradient(135deg, var(--brand-hero-from) 0%, var(--brand-hero-to) 100%); } .damos-soft-shadow{ box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12); } .damos-card-hover{ transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .damos-card-hover:hover{ transform: translateY(-4px); } /* Accent helpers */ .damos-accent{ color: var(--brand-accent); } .damos-accent-bg{ background: var(--brand-accent); } /* Buttons */ .damos-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; font-weight: 700; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; text-decoration: none; user-select: none; } .damos-btn:active{ transform: translateY(1px); } .damos-btn-primary{ background: #FFFFFF; color: var(--brand-hero-from); } .damos-btn-primary:hover{ background: rgba(255,255,255,.92); } .damos-btn-secondary{ border: 2px solid rgba(255,255,255,.9); color: #FFFFFF; } .damos-btn-secondary:hover{ background: #FFFFFF; color: var(--brand-hero-from); border-color: #FFFFFF; } .damos-btn-solid, .damos-btn-solid.damos-nav-link{ background: var(--brand-accent); color: #FFFFFF; /*color: #0B1220;*/ } .damos-btn-solid:hover{ background: var(--brand-accent-600); color: #0B1220; } /* ---------- Navbar ---------- */ .damos-nav{ position: sticky; top: 0; z-index: 50; height: var(--nav-height); background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .damos-nav-inner{ height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .damos-nav-logo{ font-weight: 900; letter-spacing: -0.02em; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; } .damos-nav-link{ font-weight: 700; color: #0F172A; text-decoration: none; padding: .5rem .75rem; border-radius: .75rem; transition: background-color .2s ease, color .2s ease; } .damos-nav-link:hover{ background: rgba(15, 23, 42, 0.05); } .damos-nav-link-accent:hover{ background: rgba(15, 23, 42, 0.05); color: var(--text); } /* Dropdown */ .damos-dropdown{ position: relative; } .damos-dropdown-panel{ position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); padding: .5rem; display: none; } .damos-dropdown-panel[data-open="true"]{ display: block; } .damos-dropdown-item{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .75rem; border-radius: .75rem; text-decoration: none; color: var(--text); font-weight: 700; font-size: .9rem; } .damos-dropdown-item:hover{ background: rgba(15, 23, 42, 0.05); } /* Mobile menu */ .damos-mobile-btn{ width: 44px; height: 44px; border-radius: .9rem; border: 1px solid var(--border); background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; } .damos-mobile-panel{ display: none; border-top: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); } .damos-mobile-panel[data-open="true"]{ display: block; } .damos-mobile-link{ display: block; padding: .9rem 1rem; text-decoration: none; color: var(--text); font-weight: 800; } .damos-mobile-link:hover{ background: rgba(15, 23, 42, 0.05); } .damos-mobile-sub{ padding: .25rem 0 .75rem 0; } .damos-mobile-sub a{ display: block; padding: .65rem 1rem; text-decoration: none; color: #0F172A; font-weight: 700; font-size: .95rem; } .damos-mobile-sub a:hover{ background: rgba(15, 23, 42, 0.05); } /* ---------- Tiny typography helpers ---------- */ .damos-small{ font-size: .85rem; line-height: 1.4; color: var(--muted); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .damos-card-hover, .damos-card-hover:hover{ transition: none; transform: none; } .damos-btn{ transition: none; } }