Keith Solomon
124 lines
2.4 KiB
CSS
124 lines
2.4 KiB
CSS
/* Tailwind setup */
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* Base styles */
|
|
@import "./base/index.css";
|
|
@import "./navigation/index.css";
|
|
|
|
/* Lineicons icon font */
|
|
@import "./fonts/lineicons.css";
|
|
|
|
/* Import *-break-out utilities (replicating the non-functional "tailwind-container-break-out" plugin) */
|
|
@import "./base/break-out.css";
|
|
|
|
/* Components */
|
|
@import "./components/index.css";
|
|
|
|
/* Blocks */
|
|
@import "./blocks/index.css";
|
|
|
|
/* Import Tailwind typography plugin */
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
/* Go Ask Auntie Custom Styles */
|
|
|
|
/* Background images */
|
|
@theme {
|
|
--background-image-hero: url('/static/img/bg-hero.png');
|
|
--background-image-map: url('/static/img/bg-map.png');
|
|
--background-image-pattern: url('/static/img/bg-pattern.png');
|
|
--background-image-condom: url('/static/img/bg-condom.png');
|
|
--background-image-wwor: url('/static/img/bg-wwor.png');
|
|
--background-image-wwor-body: url('/static/img/bg-wwor-body.png');
|
|
}
|
|
|
|
/* Buttons - matching Auntie style */
|
|
.btn {
|
|
@apply rounded-full border-4 border-white text-white px-8 py-2 text-center font-bold uppercase cursor-pointer transition-shadow duration-300;
|
|
}
|
|
|
|
.btn:hover {
|
|
@apply shadow-lg;
|
|
}
|
|
|
|
.btn.bg-red {
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
.btn.bg-navy {
|
|
background-color: var(--color-navy);
|
|
}
|
|
|
|
.btn.bg-teal {
|
|
background-color: var(--color-teal);
|
|
}
|
|
|
|
.btn.bg-purple {
|
|
background-color: var(--color-purple);
|
|
}
|
|
|
|
/* Section padding - matches Auntie layout */
|
|
section {
|
|
@apply md:px-0 px-4;
|
|
}
|
|
|
|
/* Font Passion One utility */
|
|
.font-passion-one {
|
|
font-family: "Passion One", cursive;
|
|
}
|
|
|
|
/* Prose overrides for Auntie brand */
|
|
.prose {
|
|
--tw-prose-body: var(--color-navy);
|
|
--tw-prose-headings: var(--color-navy);
|
|
--tw-prose-links: var(--color-navy);
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Background utilities */
|
|
.bg-hero {
|
|
background-image: var(--background-image-hero);
|
|
}
|
|
|
|
.bg-map {
|
|
background-image: var(--background-image-map);
|
|
}
|
|
|
|
.bg-pattern {
|
|
background-image: var(--background-image-pattern);
|
|
}
|
|
|
|
.bg-condom {
|
|
background-image: var(--background-image-condom);
|
|
}
|
|
|
|
.bg-wwor {
|
|
background-image: var(--background-image-wwor);
|
|
}
|
|
|
|
.bg-wwor-body {
|
|
background-image: var(--background-image-wwor-body);
|
|
}
|
|
|
|
.bg-overlay {
|
|
position: relative;
|
|
}
|
|
|
|
.bg-overlay::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: inherit;
|
|
opacity: 0.5;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg-overlay > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|