83 lines
2.6 KiB
SCSS
83 lines
2.6 KiB
SCSS
:root {
|
|
// font families
|
|
--font-main: 'AvenirNextMedium', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-medium: 'AvenirNextMedium', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-demi: 'AvenirNextDemi', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-bold: 'AvenirNextBold', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-italic: 'AvenirNextRegularItalic', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-medium-italic: 'AvenirNextMediumItalic', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-demi-italic: 'AvenirNextDemiItalic', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-main-bold-italic: 'AvenirNextBoldItalic', 'Avenir Next', 'Avenir', sans-serif;
|
|
--font-serif: 'p22-mackinac-pro', serif;
|
|
|
|
--font-size-caption: .8rem;
|
|
--font-size-body: 1rem;
|
|
--font-size-lead: 1.4rem;
|
|
--font-size-h2: 1.8rem;
|
|
--font-size-h1: 2.4rem;
|
|
|
|
|
|
// colors
|
|
|
|
// color palette
|
|
--color-deepBrick: rgb(114, 3, 40);
|
|
--color-neufPink: rgb(205, 150, 171);
|
|
--color-betongGray: rgb(229, 226, 215);
|
|
--color-goldenOrange: rgb(255, 105, 21);
|
|
--color-goldenBeige: rgb(248, 188, 144);
|
|
--color-chateauBlue: rgb(10, 15, 109);
|
|
--color-chateauBlue-05: rgba(10, 15, 109, .5);
|
|
--color-white: #fff;
|
|
--color-black: rgb(22, 21, 22);
|
|
|
|
// additional colors adjusted for web
|
|
--color-betongGray-darkened: rgb(220, 216, 204);
|
|
|
|
// colors in use
|
|
--color-text: var(--color-chateauBlue);
|
|
--color-background: var(--color-betongGray);
|
|
--color-background-secondary: var(--color-betongGray-darkened);
|
|
--color-cta-background: var(--color-goldenOrange);
|
|
--color-cta-text: var(--color-black);
|
|
--color-placeholder: var(--color-neufPink);
|
|
--color-menu-text: var(--color-deepBrick);
|
|
--color-menu-background: var(--color-goldenBeige);
|
|
|
|
// spacing
|
|
--spacing-sitepadding-block: 2rem;
|
|
--spacing-sitepadding-inline: 2rem;
|
|
--spacing-gap-column: var(--spacing-sitepadding-block);
|
|
--spacing-gap-row: calc(var(--spacing-gap-column)*-.25);
|
|
--spacing-xs: .5rem;
|
|
--spacing-s: 1rem;
|
|
--spacing-m: 2rem;
|
|
--spacing-l: 3rem;
|
|
--spacing-xl: 6rem;
|
|
--spacing-section-bottom: var(--spacing-l);
|
|
|
|
// sizes
|
|
--size-width-p: 36rem;
|
|
--size-icon: 1em;
|
|
--size-icon-circle: 2.4rem;
|
|
--size-icon-large: 3.4rem;
|
|
|
|
// animations
|
|
--transition-easing: .3s ease;
|
|
|
|
--border: 1px solid var(--color-neufPink);
|
|
--border-s: 1px solid var(--color-chateauBlue-05);
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
:root {
|
|
--spacing-sitepadding-block: 2.5rem;
|
|
--spacing-sitepadding-inline: 6rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
:root {
|
|
--spacing-sitepadding-block: 3rem;
|
|
--spacing-sitepadding-inline: 10rem;
|
|
}
|
|
} |