/* ========================================================================== Weddle Media — Global Styles CSS custom properties (shadcn-inspired tokens) + component overrides. Tailwind utility classes are loaded via CDN in the HTML . ========================================================================== */ /* --- Design Tokens -------------------------------------------------------- */ :root { /* Brand */ --teal: 168 76% 52%; /* Surfaces */ --background: 0 0% 100%; --foreground: 220 15% 15%; --card: 0 0% 100%; --card-foreground: 220 15% 15%; --popover: 0 0% 100%; --popover-foreground: 220 15% 15%; /* Dark surfaces (hero, footer, CTA banner) */ --dark-bg: 0 0% 0%; --dark-fg: 0 0% 96%; /* Interactive */ --primary: 168 76% 52%; --primary-foreground: 220 20% 10%; --secondary: 220 14% 96%; --secondary-foreground: 220 15% 15%; --muted: 220 14% 96%; --muted-foreground: 220 9% 46%; --accent: 168 76% 52%; --accent-foreground: 220 20% 10%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; /* Chrome */ --border: 220 13% 91%; --input: 220 13% 91%; --ring: 168 76% 52%; --radius: 0.5rem; } /* --- Base resets ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* --- Utility: section padding --------------------------------------------- */ .section-pad { padding-block: 4rem; } @media (min-width: 768px) { .section-pad { padding-block: 5rem; } } @media (min-width: 1024px) { .section-pad { padding-block: 6rem; } } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; line-height: 1; padding: 0.75rem 1.5rem; border-radius: var(--radius); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; cursor: pointer; border: none; } .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { background-color: hsl(168 76% 45%); } .btn-outline { background-color: transparent; color: hsl(var(--dark-fg)); border: 1px solid hsl(var(--dark-fg) / 0.3); } .btn-outline:hover { background-color: hsl(var(--dark-fg) / 0.1); } .btn-outline-dark { background-color: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); } .btn-outline-dark:hover { background-color: hsl(var(--secondary)); } /* --- Service card icon circle --------------------------------------------- */ .icon-circle { width: 3rem; height: 3rem; border-radius: 50%; background-color: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- Portfolio filter tabs ------------------------------------------------ */ .filter-tab { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius); cursor: pointer; transition: background-color 0.2s, color 0.2s; background: transparent; border: none; color: hsl(var(--muted-foreground)); } .filter-tab:hover { color: hsl(var(--foreground)); } .filter-tab[aria-selected="true"] { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } /* --- Pricing card highlight ----------------------------------------------- */ .pricing-card { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; } .pricing-card.featured { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); } /* --- Mobile nav ----------------------------------------------------------- */ .mobile-nav { display: none; flex-direction: column; gap: 1rem; padding: 1rem 1.5rem 1.5rem; background-color: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); } .mobile-nav.open { display: flex; } /* --- Pricing toggle buttons ---------------------------------------------- */ .pricing-toggle-btn { background: transparent; color: hsl(var(--muted-foreground)); border: none; cursor: pointer; } .pricing-toggle-btn:hover { color: hsl(var(--foreground)); } .pricing-toggle-btn.active { background-color: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px hsl(0 0% 0% / 0.08); } /* --- Skip link (accessibility) -------------------------------------------- */ .skip-link { position: absolute; top: -100%; left: 0.5rem; padding: 0.5rem 1rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: var(--radius); z-index: 100; font-weight: 600; } .skip-link:focus { top: 0.5rem; }