summaryrefslogtreecommitdiff
path: root/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'styles.css')
-rw-r--r--styles.css891
1 files changed, 891 insertions, 0 deletions
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..6cc3f3b
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,891 @@
+/*
+vars and color
+ */
+:root {
+ /* define the color pallet */
+ /*--primary-color: #D1F7FF;*/
+ --primary-color: rgb(220, 251, 254);
+ --secondary-color: #fcd6c2;
+ --accent-color: #DA627D;
+ --second-accent-color: #222E50;
+}
+
+/* minimalist reset */
+* {
+ padding: 0;
+ margin: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+ line-height: 1.5;
+ background-color: rgb(30, 30, 30);
+ /*color: rgb(212, 212, 212);*/
+}
+
+header {
+ position: relative;
+ overflow: hidden;
+}
+
+p {
+ line-height: 1.2;
+}
+/*
+body and main container
+ */
+
+/* media should not be inline, but be blocks */
+/* media shouldn't break out of their container */
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+}
+
+.main-container {
+ background-color: transparent;
+ width: 100%;
+ display: block;
+ margin: 0 auto;
+}
+
+/*
+section format + colors
+ */
+
+section, header {
+ padding: 1.5rem 2rem 4rem 2rem;
+}
+
+section:nth-child(even) {
+ background-color: var(--primary-color);
+}
+
+
+section:nth-child(odd) {
+ background-color: var(--secondary-color);
+}
+
+.title, .title-info-flex, .edges{
+ text-align: left;
+ padding: 0 15% 1rem 15%;
+}
+
+.title {
+ color: var(--accent-color);
+}
+
+
+h2 {
+ text-align: center;
+ font-size: 2rem;
+}
+
+strong {
+ color: var(--accent-color);
+ font-weight: 800;
+}
+
+
+/*
+header color will be that blue
+ */
+
+header {
+ background-color: var(--primary-color);
+}
+
+
+/*
+nav bar (logo and anchors)
+ */
+
+nav {
+ margin: 0 20px 15px 20px;
+ padding: 0;
+}
+
+.nav-flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-right: 20px;
+}
+
+.nav-flex > a {
+ margin-bottom: 30px;
+}
+
+.logo-img {
+ width: 80px;
+ height: 80px;
+ border-radius: 100%;
+ padding: 0;
+}
+
+.button:hover {
+ /* goal - make it look clickable */
+ transition-duration: .2s;
+ font-size: 107%;
+}
+
+/* Adapted from https://www.w3schools.com/howto/howto_js_collapse_sidepanel.asp */
+
+/* The sidepanel menu */
+.sidepanel {
+ height: 100vh;
+ width: 0;
+ position: fixed;
+ z-index: 101;
+ top: 0;
+ left: 0;
+ overflow-x: hidden;
+ transition: 0.4s;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #222E50ee;
+}
+
+.sidepanel a {
+ text-decoration: none;
+ font-size: 25px;
+ color: white;
+ display: block;
+ transition: 0.3s;
+ margin-bottom: 10px;
+}
+
+.sidepanel .logo-img {
+ margin-bottom: 20px;
+}
+
+.sidepanel .link::before{
+ background-color: var(--secondary-color);
+}
+
+
+/* When you mouse over the navigation links, change their color */
+.sidepanel a:hover {
+ color: #2BB673;
+}
+
+/* Position and style the close button (top right corner) */
+.sidepanel .closebtn {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ margin-left: 50px;
+}
+
+
+#hamburger-box {
+ padding: 10px;
+ position: fixed;
+ height: fit-content;
+ top: 0;
+ width: 100%;
+ justify-content: space-between;
+ background-color: rgb(43,42,45,0.6);
+ margin: 0;
+ display: none;
+ z-index: 100;
+}
+
+/* Style the button that is used to open the sidepanel */
+.openbtn {
+ font-size: 30px;
+ cursor: pointer;
+ background-color: rgb(0,0,0,0);
+ color: white;
+ border: none;
+ padding: 0;
+}
+
+
+.openbtn:hover {
+ background-color: #444;
+}
+
+/* Link Styling - https://codepen.io/team/css-tricks/pen/xxPORam */
+.link {
+ text-decoration: none;
+ position: relative;
+ color: var(--accent-color);
+ font-weight: 700;
+}
+
+.link::before {
+ content: "";
+ background-color: #0000ff77;
+ position: absolute;
+ left: 0;
+ bottom: -0.125rem;
+ width: 100%;
+ height: 2px;
+ z-index: 5;
+ transition: all 0.2s ease-out;
+}
+
+.link:hover::before {
+ bottom: 0;
+ height: 100%;
+ background-color: #0000ff22;
+ border-radius: 5%;
+ transform: scale(1.1);
+}
+
+/*
+title area (animated text and connie's 3d model)
+ */
+.title-flex {
+ display: flex;
+ justify-content: left;
+ padding: 0;
+ z-index: 1;
+}
+
+.title-info-flex {
+ display: flex;
+ flex-direction: column;
+ width: fit-content;
+ max-width: 65vw;
+ align-items: start;
+}
+
+.video-title-wrapper {
+ z-index: 1;
+ width: clamp(25rem, 35vw, 500px);
+ margin-bottom: 1rem;
+ padding-left: 50px;
+}
+
+#video-title {
+ border-radius: 30px;
+ position: relative;
+}
+
+
+.hide-border {
+ position: relative;
+ border: solid 2px var(--primary-color);
+ width: calc(100% - 4px);
+ height: 100%;
+ top: -100%;
+ margin: 0;
+ padding: 0;
+}
+
+
+.course-title-wrapper {
+ margin-top: .5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 10px;
+}
+
+
+h1 {
+ font-size: 4rem;
+ font-weight: 700;
+ color: var(--accent-color);
+ line-height: .8;
+ z-index: 5;
+}
+
+.course-name {
+ font-size: 2rem;
+ line-height: 1;
+ margin: .25rem 0 1rem 0;
+ z-index: 5;
+}
+
+
+.pastries-wrapper {
+ /* 16:9 aspect ratio */
+ overflow: hidden;
+ position: absolute;
+ margin: 0;
+ z-index: 2;
+ height: 450px;
+ width: 200vw;
+ pointer-events: none;
+ touch-action: none;
+ user-select: none;
+ tab-index: -1;
+}
+
+#connie-pastries {
+ border: 0;
+ height: 100%;
+ position: absolute;
+ top: 10px;
+ width: 100%;
+ pointer-events: none;
+ touch-action: none;
+ user-select: none;
+ left: -35vw;
+ z-index: -1000;
+ tab-index: -1;
+}
+
+
+.pastries-business-flex {
+ display: flex;
+ flex-direction: column;
+ align-items: baseline;
+}
+
+.business-hours {
+ z-index: 5;
+ background-color: black;
+ padding: 10px 20px;
+ border-radius: 15px;
+ color: rgb(212, 212, 212);
+ margin-left: 10px;
+}
+
+.business-hours > * {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+
+/*
+weekly specials area
+ */
+
+#weekly_specials {
+ padding: 30px;
+ border: 10px solid var(--primary-color);
+ background-color: transparent;
+}
+
+#weekly_specials * {
+ background-color: var(--primary-color);
+}
+
+#weekly_specials > * {
+ padding: 10px;
+}
+
+/*
+course info section
+ */
+
+.button {
+ /* goal - make it look clickable */
+ display: block;
+ padding: 5px 10px;
+ text-align: center;
+ border-radius: 10px;
+ color: black;
+ font-weight: bold;
+ line-height: 25px;
+ text-decoration: none;
+
+ border: 2px blue solid;
+ background-color: white;
+
+ width: fit-content;
+}
+
+/*
+full menu & ta_calendar
+ */
+
+.spreadsheet-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 auto;
+}
+
+.important-note > p {
+ padding-left: 10px;
+ margin: .5rem 0 1rem 0;
+}
+
+.embedded-iframe {
+ width: 70vw;
+ height: max(60vh, 500px);
+ display: block;
+ margin-top: 10px;
+}
+
+/*
+convenience for helpful links
+ */
+
+.subtitles {
+ color: var(--accent-color);
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.wrap-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: left;
+ width: 100%;
+}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.flex-right {
+ align-items: flex-end;
+}
+
+.flex-space-between {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.small-icon {
+ height: 25px;
+ width: auto;
+ margin-right: 10px;
+}
+
+#helpful-links-box {
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ justify-content: space-evenly;
+ margin: 1rem auto 0 auto;
+}
+
+.helpful-link {
+ text-decoration: none;
+ color: var(--second-accent-color);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 150px;
+ padding: 5px 15px;
+ border-radius: 5px;
+ border: 3px solid #0000ff66;
+ margin: 10px 0;
+}
+
+.helpful-link h3 {
+ color: var(--second-accent-color);
+ margin-left: 5px;
+}
+
+.helpful-link:hover h3 {
+ color: #706881;
+}
+
+.helpful-link:hover {
+ background-color: white;
+ color: black;
+}
+
+.helpful-link .svg-hover {
+ display: none;
+}
+.helpful-link:hover .svg-show {
+ display: none;
+}
+.helpful-link:hover .svg-hover {
+ display: inline;
+}
+
+.no-border-helpful-link .svg-hover {
+ display: none;
+}
+.no-border-helpful-link:hover .svg-show {
+ display: none;
+}
+.no-border-helpful-link:hover .svg-hover {
+ display: inline;
+}
+
+.no-border-helpful-link {
+ color: var(--second-accent-color);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ margin: 10px 0;
+ text-decoration: none;
+}
+
+.no-border-helpful-link h3 {
+ color: var(--second-accent-color);
+ margin-left: 5px;
+}
+.no-border-helpful-link:hover h3 {
+ color: #DA627D;
+}
+
+.no-border-helpful-link:hover {
+ color: #DA627D;
+}
+
+
+/*
+staff area
+ */
+.email {
+ border-left: 3px solid var(--accent-color);
+ padding-left: 10px;
+ margin: 10px 25px;
+}
+
+#emails {
+ margin-bottom: 15px;
+}
+
+.ta-box-left, .ta-box-right {
+ margin: 0 20px;
+}
+
+.ta-pastry {
+ width: 150px;
+ height: auto;
+ text-shadow: 0 0 25px brown;
+ z-index: 1;
+ align-self: flex-end;
+ opacity: 1;
+ transition: .5s ease;
+ border-radius: 25%;
+ padding-bottom: 20px;
+}
+
+.bio-text {
+ justify-content: center;
+ text-align: center;
+ font-size: 120%;
+}
+
+.bio-text h3 {
+ color: var(--accent-color);
+ margin: 0;
+}
+
+.bio-text h4 {
+ font-size: 14px;
+ letter-spacing: normal;
+ text-transform: none;
+ max-width: 200px;
+ line-height: 1;
+ margin-bottom: 35px;
+ font-weight: normal;
+ padding: 0 5px;
+ color: var(--second-accent-color);
+}
+
+.shelf-png {
+ width: 800px;
+ height: auto;
+ margin-top: -30px;
+}
+.img-box {
+ display: flex;
+ cursor: default;
+ position: relative;
+ height: 100%;
+}
+.ta-img {
+ transition: .5s ease;
+ opacity: 0;
+ position: absolute;
+ top: calc(50% - 5px);
+ left: 50%;
+ height: 100px;
+ width: auto;
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+}
+.img-box:hover .ta-pastry{
+ opacity: 0;
+}
+
+.img-box:hover .ta-img {
+ opacity: 1;
+}
+
+.shelf .flex-row {
+ align-items: flex-end;
+}
+
+
+/*
+faq area
+ */
+
+#faq h3 {
+ padding-top: 1rem;
+ line-height: 1.2;
+ color: var(--accent-color);
+}
+
+#faq p {
+ color: var(--second-accent-color);
+}
+
+#faq h4 {
+ font-weight: 400;
+ filter: opacity(0.5);
+}
+
+#faq {
+ padding-bottom: 1rem;
+}
+
+footer {
+ padding-top: 1.5rem;
+ text-align: right;
+}
+
+img {
+ height: 100px;
+ width: auto;
+}
+
+/* nav bar drawer */
+#nav-links {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+#nav-links > * {
+ margin-top: 1rem;
+ margin-bottom: 0.25rem;
+}
+
+#nav {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ align-self: flex-start; /* makes flex element only as vertically large as needed for sticky */
+ flex-direction: column;
+ width: 12rem;
+ text-align: center;
+ z-index: 999;
+ background-color: #a6b198;
+ margin: 0;
+ padding: 1rem;
+ height: 100vh;
+}
+
+
+
+@media only screen and (max-width: 1100px) {
+ .title-info-flex, .title, .edges {
+ padding: 0 5%;
+ }
+
+ .embedded-iframe {
+ width: 90vw;
+ }
+}
+
+
+@media only screen and (max-width: 845px) {
+ #emails {
+ width: 90%;
+ }
+}
+
+@media only screen and (max-width: 720px) {
+ header {
+ padding-left: 1rem;
+ }
+ .title-info-flex, .title, .edges {
+ padding-left: 2%;
+ }
+ .embedded-iframe {
+ width: 95vw;
+ }
+ .shelf-png {
+ width: 90%;
+ }
+ .ta-box-left, .ta-box-right {
+ max-width: 45%;
+ }
+ .ta-box-left {
+ flex-direction: column-reverse !important;
+ margin: 0 5px;
+ }
+ .ta-box-right {
+ flex-direction: column !important;
+ margin: 0 5px;
+ }
+ .ta-pastry {
+ align-self: center;
+ }
+ .ta-wrapper {
+ align-items: flex-end !important;
+ }
+ .shelf .flex-row {
+ align-items: center;
+ }
+ .bio-text h4 {
+ margin-bottom: 5px;
+ }
+ .ta-pastry {
+ padding-bottom: 25px;
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ .nav-flex {
+ display: none;
+ }
+ .title-info-flex {
+ margin-top: 55px;
+ }
+ .title-flex {
+ justify-content: flex-start;
+ }
+ .business-hours {
+ margin-left: 5px;
+ }
+ .course-title-wrapper {
+ margin-top: 50px;
+ }
+ .video-title-wrapper {
+ padding-left: 0;
+ margin: 0;
+ }
+ .title-info-flex, .title {
+ max-width: 90vw;
+ }
+ .pastries-wrapper {
+ bottom: -30px;
+ }
+ #connie-pastries {
+ left: -50vw;
+ }
+ #helpful-links-box {
+ flex-direction: column;
+ align-items: center;
+ padding: 0 10px;
+ }
+ #helpful-links-box .subtitles {
+ font-size: 150%;
+ }
+ #helpful-links-box > .flex-column:not(:first-child) {
+ margin-top: 2rem;
+ }
+ #emails {
+ align-items: center;
+ }
+ #hamburger-box {
+ display: block;
+ }
+ .business-hours {
+ margin-top: 2rem;
+ }
+}
+
+/*
+animation for a button to appear and glow on hover
+ */
+.glow-on-hover {
+ outline: none;
+ color: black;
+ cursor: pointer;
+ position: relative;
+ z-index: 0;
+ border-radius: 10px;
+}
+
+.glow-on-hover:before {
+ content: '';
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--secondary-color), var(--primary-color));
+ position: absolute;
+ top: -2px;
+ left:-2px;
+ background-size: 400%;
+ z-index: -1;
+ filter: blur(5px);
+ width: calc(100% + 4px);
+ height: calc(100% + 4px);
+ animation: glowing 20s linear infinite;
+ opacity: 0;
+ transition: opacity .3s ease-in-out;
+ border-radius: 10px;
+}
+
+.glow-on-hover.rainbow:before {
+ background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+}
+
+.glow-on-hover:active {
+ color: #000;
+}
+
+.glow-on-hover:active:after {
+ background: transparent;
+}
+
+.glow-on-hover:hover:before {
+ opacity: 1;
+}
+
+.glow-on-hover:after {
+ z-index: -1;
+ content: '';
+ position: absolute;
+ background-color: inherit;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ border-radius: 7px;
+}
+
+@keyframes glowing {
+ 0% { background-position: 0 0; }
+ 50% { background-position: 400% 0; }
+ 100% { background-position: 0 0; }
+}
+
+/*
+weekly specials conic border
+ */
+/*.conic-border {*/
+/* --startDeg: 0deg;*/
+
+/* border: 7px solid;*/
+/* border-image-slice: 1;*/
+
+/* border-image-source: conic-gradient(*/
+/* from var(--startDeg, 0deg),*/
+/* #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000*/
+/* );*/
+
+/* display: grid;*/
+/* place-content: center;*/
+/* box-sizing: border-box;*/
+/*}*/
+
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 02:58:52 +0000